浮动及清除浮动的方法

Posted 2020-08-09 amy01

1.浮动float

浮动元素脱离文档流，不占据空间。浮动元素直到它的外边缘碰到包含框或另一个浮动框的边框为止。

2.元素浮动有哪些问题？

• 父元素的高度无法被撑开，影响与父元素同级的元素

• 与浮动元素同级的非浮动元素会跟随其后

• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

3.清除浮动的方法

(1)、使用空标签清除浮动

在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签,影响文档结构美观性。

1 <div style="clear:both"></div>

(2)、使用overflow

给包含浮动元素的父标签添加css属性 overflow:auto;

1 <div style="overflow:hidden;">
2     <div style="float:left">我是浮动的内容</div>
3 </div>

(3)、使用伪类after清除浮动

父元素添加类名clearfix，这也是经典的清除浮动方法。

 

 1 .clearfix:after {
 2   display: block;
 3   content: " ";
 4   height:0;
 5   visibility: hidden;
 6   clear: both;    
 7 }
 8 .clearfix{
 9   *zoom: 1;/*兼容ie6*/
10 }