css清除浮动

CSS清除浮动

当我们需要水平布局时，首先定义一个父框，然后在父框中子元素浮动进行水平布局。

浮动带来的影响：
1.若父框不设置高度，浮动元素是不会撑起父框的。
2.浮动元素会影响后面正常流布局的元素。后面的元素在布局时会假装浮动元素不存在一样。所以正常布局的框会跑到浮动元素的位置上，然后会被浮动元素遮挡。

所以要清除浮动带来的影响

• 直接给包含浮动元素的父框设置高度，这样不管父框内的元素如何布局，都不会影响后面正常布局的元素。
  
  • 优点：简单
  • 缺点：设置父框的目的主要是将浮动的子框包含，若设置父框的高度则会限制子框的内容。

• 给后面正常布局的框设置clear:both样式。

  • 优点：不用额外添加标签
  • 缺点：这种方式虽然不影响后面的正常布局，但是并没有解决浮动元素父框的高度问题，也就是说它的高度依然是0，这时候设置box3的margin-top的高度是相对浮动元素父框的上边。
    

• 在box2的后面添加一个div并设置clear:both;来清除浮动。

  • 优点：既撑起了父框，也消除了给后面正常布局元素带来的影响
  • 缺点：若一个网页有大量的浮动元素，那每次清除都会添加额外的div标签
• 利用浮动元素的父框的伪元素:after设置clear:both来清除浮动
  
  • 优点：解决了额外添加div标签的问题
  • 缺点：IE8以前的兼容性问题
• 给浮动元素的父框设置overflow:hidden（auto）
  
  • 优点：解决了额外添加div标签的问题
  • 缺点：IE8以前不支持利用overflow:hidden来清除浮动,所以需要加上一个*zoom:1;实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制；另外，在和定位结合在一起使用时会有冲突。