清除浮动的三种方式-清除浮动的方法总结

清除浮动的三种方式_浮动和清除浮动_浮动清除浮动

方法一

为浮动的那些子元素的父亲设置一个高度

注意点：在企业开发中，这样限定固定高度会使页面操作不灵活，不推荐！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }        
        .header {
            border: 5px solid #000;

            height: 200px;
        }        
        .logo {
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }
        .nav {
            width: 200px;
            height: 200px;
            background-color: green;

            float: left;
        }
        .content {
            width: 960px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo">logo</div>
    <div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</body>
</html>

方法二

clear : none | left | right | both

注意：clear这个属性必须设置在块级、并且不浮动的元素中

#1、取值： none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许左右有浮动对象

#2、把握住两点：

1.元素是从上到下、从左到右依次加载的。

2.clear: left;对自身起作用，而不会影响其他元素。一旦左边有浮动元素清除浮动的三种方式清除浮动的三种方式，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。

案例：clear：both解决父级塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }        
        .header {
            border: 5px solid #000;
        }    
        .logo {
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }
        .nav {
            width: 200px;
            height: 200px;
            background-color: green;

            float: left;
        }
        .content {
            width: 960px;
            height: 200px;
            background-color: yellow;
            /*该元素的左右两边都允许有浮动元素*/
            clear: both;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo">logo</div>
    <div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</body>
</html>

注意1：元素是从上到下、从左到右依次加载的。在右侧元素还没有加载到时，clear：right是无用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;

            /*
            元素是从上到下、从左到右依次加载的。
            而此时r2右侧并没有浮动的元素，
            所以此处即便是设置了也没有用
            */
            clear: right;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>

</body>
</html>

注意2：这种方式的弊端是：当我们给某个元素添加clear属性之后，那么这个属性的-top属性可能会失效，因而也不推荐直接用clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            /*border: 1px solid #000;*/
        }
        .header {
            /*border: 5px solid #000;*/
        }
        .logo {
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }
        .nav {
            width: 200px;
            height: 200px;
            background-color: green;

            float: left;
        }
         /*
        浮动header内的两个元素，然后div内没有标准流元素能撑起他的高度，于是它的高度为0
        此时content应该先填充到header原来的位置，由于此时header既没有高度也没有边框，
        于是content的margin-top就是相对于body来说的了
        对于margin-top，如果父元素body没有边框，则父元素会被一起顶下来，而body这个元素
        又不应该被顶下来，于是我们可以为body设置边框，但在企业开发中没人会为body设置边框
        所以此处只是单纯的演示效果而为body加边框
        */
        .content {
            width: 960px;
            height: 200px;
            background-color: yellow;
            clear: both;
            margin-top: 500px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo">logo</div>
    <div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</body>
</html>

方法三

隔墙法

1、外墙法

1 在两个盒子中间添加一个额外的块级元素

2 给这个额外添加的块级元素设置clear：both；属性注意：外墙法它可以让第二个盒子使用-top属性外墙法不可以让第一个盒子使用-属性，所以我们通常用墙的高度作的替代品在企业开发中可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法

2、内墙法

1 在第一个盒子中所有子元素最后添加一个额外的块级元素

2 给这个额外添加的块级元素设置clear：both；属性注意：内墙法它可以让第二个盒子使用-top属性内墙法可以让第一个盒子使用-属性内墙法也可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法

3、内墙法与外墙法的区别？

1 外墙法不可以撑起第一个盒子的高度，而内墙可以

2 在企业开发中清除浮动，内墙法与外墙法都不常用，因为添加一个无用的墙在前端开发中推崇结构与样式分离，而隔墙法需要添加大量的没有意义的空标签div

外墙法实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
        }

        .header {
        }

        .logo {
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }
        .nav {
            width: 200px;
            height: 200px;
            background-color: green;

            float: left;
        }

        .content {
            width: 960px;
            height: 200px;
            background-color: yellow;
        }

        .wall {
            clear: both;
            height: 20px;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">nav</div>
</div>

<!--外墙-->
<div class="wall h20"></div>

<div class="content">content</div>


</body>
</body>
</html>

内墙法实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
        }

        .header {
            /*margin-bottom: 30px;*/
        }

        .logo {
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }
        .nav {
            width: 200px;
            height: 200px;
            background-color: green;

            float: left;
        }

        .content {
            width: 960px;
            height: 200px;
            background-color: yellow;
            /*margin-top: 30px;*/
        }

        .wall {
            clear: both;
            height: 30px;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">nav</div>
    <!--内墙-->
    <div class="wall h20"></div>
</div>



<div class="content">content</div>


</body>
</body>
</html>

方法四

本质原理与内墙法一样，但我们用的css的伪元素选择器实现的，就应该用css来控制样式，符合前端开发思想

详细用法

.:after {

: ".";

: block;

clear: both;

: ;

:;仍然占据空间，只是看不到而已；

line-: 0;

: 0;

font-size:0;

} . { *zoom:1;}

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。

之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。

必须要写的是下面这三句话 : '.'; : block; clear: both;

新浪首页清除浮动的方法，也是采用伪元素 : "."; : block; : 0; clear: both; : ;

1 复习伪元素选择器(CSS3中新增的为元素选择器) 伪元素选择器的作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

2 格式：给指定标签的前面和后面添加子元素标签名称::{ 属性名称：值； } 标签名称::after{ 属性名称：值； }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
        }

        .header:after {
            /*必须要写这三句话*/
            content: '.';
            height: 0;
            display: block;
            clear: both;
            visibility: hidden;
        }
        .header {
            /*兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用*/
            *zoom: 1;
        }

        .logo {
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }
        .nav {
            width: 200px;
            height: 200px;
            background-color: green;

            float: left;
        }

        .content {
            width: 960px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">nav</div>
</div>



<div class="content">content</div>


</body>
</body>
</html>

方法五

:，但其实它除了清除浮动还有其他方面的用途

1、可以将超出标签范围的内容裁剪掉

2、清除浮动

3、可以通过：，让里面的盒子设置-top属性后，外面的盒子不被顶下来，这样就不用为外边的盒子添加边框了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
        }

        .header {
            overflow: hidden;
        }
        .logo {
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }
        .nav {
            width: 200px;
            height: 200px;
            background-color: green;

            float: left;
        }

        .content {
            width: 960px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">nav</div>
</div>



<div class="content">content</div>


</body>
</body>
</html>

温馨提示：文章素材来源于网络，版权归原作者所有！

清除浮动的三种方式_浮动清除浮动_浮动和清除浮动

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

内墙法外墙法方法总结注意事项清除浮动

发表回复取消回复

站长微信

知识星球

公众号

发表回复 取消回复

发表回复取消回复