清除浮动的6种方式

首先，先拿一个例子引入这次的内容

首先是页面内容

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
           

然后是样式

<style>
        .box1{
            background-color: #096;
        }
        .box1 p{
            background-color: red;
            width: 100px;
        }
        .box2{
            background-color: tomato;
        }
        .box2 p{
            background-color: blue;
            width: 100px;
        }
        p{
            float: left;
        }
    </style>
           

网页内容是

我们最终的目的是清除浮动

由于并没有给两个div设置宽高，在没有给p标签设置左浮之前，div的宽高完全是由p标签的内容撑起来的，现在所有p标签左浮，p标签脱离标准流，在这着重说一下

在标准流中，内容的高度可以撑起父元素的高度

在浮动流中，浮动的元素是不可以撑起父元素的高度的

所以，当p标签左浮时，父元素div的高度消失，只剩下p标签，按照左浮规则，就会出现如图1那样的情况。

**

清除浮动方式1：给前面父元素设置高度

**

.box1{
	height:21px;
	 background-color: #096;
}
           

注意：在企业开发中，我们能不写高度就不写高度，所以这种方式用的很少。

**

清除浮动方式2：给后面盒子添加clear属性

**

clear取值

取值	定义
none	默认取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
left	不要找前面的左浮动元素
right	不要找前面的右浮动元素
both	不要找前面的左浮动元素和右浮动元素

.box2{
            clear: both;
            background-color: tomato;
        }
           

注意点：当我们给某个元素添加clear属性之后，那么这个属性的margin属性就会失效。！！！！

**

清除浮动方式3：外墙法

**

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="wall h20" style=“clear:both;height:20px”></div><!--外墙法：添加一个额外的块级元素-->
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
           

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

2、给这个额外的块级元素设置clear：both属性

注意点：外墙法可以让第二个盒子使用margin-top属性，但是不能让第一个盒子使用margin-bottom属性。 但一般不会设置第一个盒子的margin-bottom属性或第二个盒子的margin-top属性，而是设置额外块级元素的高度!!!

**

清除浮动方式4：内墙法

**

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
    <div class="wall h20" style=“clear:both;height:20px”></div>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
           

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

2、给这个额外添加的块级元素设置clear：both属性

注意点：

1、内墙法可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性

2、 在企业开发中不常用隔墙法来清除浮动，因为前端开发推崇样式和结构分离，每一段都加一个墙的话，

代码会冗余很多。

3、隔墙法是添加一个块级元素，但在前端开发中，是结构和样式分离，而且添加一个块级元素它没有给任何元素添加语义，所以不推荐这样的写法，而清除浮动改变的是网页的样式，而改变样式最好用CSS来做。所以伪选择器正好是通过CSS代码来清除浮动。符合结构和样式分离思想，我们比较推荐这一种。

**

清除浮动方式5：伪元素选择器（CSS3新增）

**

1、什么是伪元素选择器？

伪元素选择器作用就是给指定标签的内容前面添加一个子元素

或者给指定标签的内容后面添加一个子元素

2、格式

（1）给指定标签的内容前面添加一个子元素

标签名称::before{

属性名称：值;

}

（2）指定标签的内容后面添加一个子元素

标签名称::after{

属性名称：值;

}

.box1::after{
            /*设置添加的子元素的内容为空*/
            content: '';
            /*设置添加的子元素为块级元素*/
            display: block;
            /*让子元素不占用空间*/
            height: 0;
            /*设置添加的子元素看不见*/
            visibility: hidden;
            /*给添加的子元素设置clear：both*/
            clear: both;
        }
        .box1{
            /*兼容ie6*/
            *zoom:1;
        }
           

**

清除浮动方式6：overflow:hidden

**

overflow:hidden;

作用：

1.1 可以将超出标签范围的内容裁减掉

1.2 清除浮动！！！

1.3 可以让里面的盒子设置margin-top之后，

外面的盒子不被顶下来

<div class="box1" style="overflow:hidden">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
           

特别感谢李南江老师>_<