清除浮动的6种方式

清除浮动的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>

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