清除浮动的技巧,以及各自适用的使用场景

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

2.使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪元素清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值 设为”.”,但我发现为空亦是可以的。

{
  content:"";
  clear:both;
  visibility:hidden;
  height:0      
}

  

原文地址:https://www.cnblogs.com/samsara-yx/p/7884832.html