CSS 清除浮动

盒子高度问题

在标准流中内容的高度可以撑起盒子的高度

在浮动流中浮动元素内容的高不可以撑起盒子的高

/*并设置相应的css样式，并设置p样式全部左浮*/
<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>

原效果：

达到效果：

清除浮动方式一

给前面的父盒子添加高度，注意：在企业开发中能不写高度就不写高度, 所以这种方式不常用

清除浮动方式二

在.box2中设置clear:both;属性清除前面浮动元素对我的影响，注意：使用clear:both之后margin属性会失效, 所以不常用。clear属性值有left,right,等等。

清除浮动方式三

在两个有浮动子元素的盒子之间添加一个额外的块级元素。注意：在外墙

法中可以通过设置额外标签的高度来实现margin效果搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用

清除浮动方式四

在前面一个盒子的最后添加一个额外的块级元素，注意：内墙法会自动撑

起盒子的高度, 所以可以直接设置margin属性。和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

清除浮动方式五

overflow:hidden的作用是清除溢出盒子边框外的内容

由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性。IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1; 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制。优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突

.box1{

overflow:hidden;

*zoom:1; //解决ie6浏览器兼容问题

}

overflow:hidden三大作用：

1. 可以将超出标签范围的内容裁减掉
2. 清除浮动
3. 可以通过这个属性让里面的盒子设置margin-top后，外面的盒子不被顶下来（若想实现第三条，还阔以将外面的盒子添加一个boder属性来达到目的。）

 

清除浮动方式六

给前面的盒子添加伪元素来清除浮动。注意点:本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素，添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性，CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西。

伪元素选择器：给指定标签的内容前面或后面添加一个子元素。

格式：

标签名称::before{

      属性名称：值；

}

 

标签名称::after{

      属性名称：值；

}

比如：五星推荐（css3推出，曾经的ie6浏览器不支持，为了使ie6接收，阔以添加属性如下右）

.box1::after{

      Content:” ”；

display:block;

height:0;

visibility:hidden;

clear:both;

}

在左.box1::after{ }后面添加如下：

.box1{

   *zoom:1;

}