标签：text height float 自适应高度 idt htm table enter clear
2017-02-16 19:03:17
| 方法和描述 | 代码示范 | 优弊 |
|
一、浮动后在结尾加一个空的标签（如：<div>、<p>等），设置属性clear:both;
这样可以让父级元素自动获得高度
|
<!-----HTML代码----> <div> <div class=‘fl‘>左浮动</div> <div class=‘fr‘>右浮动</div> <div class=‘clear‘></div> </div> /*********CSS代码**********/ .fl{float:left;} .fr{float:right;} .clear{clear:both;} |
优点：简单、代码少，浏览器支持好，不容易出现怪问题
缺点：增加了空标签，会影响浏览器的解析速度
|
| 二、给设置浮动的元素的父级元素添加overflow CSS属性，属性设置为hidden或者auto |
1 <!-----HTML代码----> 2 <div class=‘clear‘ > 3 <div class=‘fl‘>左浮动</div> 4 <div class=‘fr‘>右浮动</div> 5 </div> 1 /***********CSS代码***********/ 2 .fl{float:left;} 3 .fr{float:right;} 4 .clear{ 5 overflow:hidden; 6 zoom:1; /*兼容IE浏览器*/ 7 } 8 /***.clear{overflow:auto;}****/ |
优点：代码少，容易上手，浏览器支持好
缺点：不能和position属性配合使用。同时使用position会出现以下情况：如果是使用hidden清除浮动，超出的部分会被隐藏；如果使用auto清除浮动，子元素的尺寸过大时会出现滚动条
|
| 三、使用为元素:after来清除浮动，如右边案例所示，表示在clear类的div元素后插入内容，并设置该内容的样式 |
1 <!-----HTML代码----> 2 <div class=‘clear‘ > 3 <div class=‘fl‘>左浮动</div> 4 <div class=‘fr‘>右浮动</div> 5 </div> 6 1 /***********CSS代码***********/ 2 .fl{float:left;} 3 .fr{float:right;} 4 .clear:after{ 5 content:‘.‘; 6 display:disblock; 7 width:0; 8 height:0; 9 visibility:hidden; 10 clear:both; 11 } 12 .clear{ 13 zoom:1; /*兼容IE浏览器,触发hasLayout*/ 14 } |
优点：浏览器支持好，不容易出现一些意想不到的问题，大型网站如新浪、网易等都有使用这个方法
缺点：代码较多，初学者相对其他方式不容易掌握
|
| 四、float-in-float，将父级元素和子元素都设置浮动，并在与父级元素同级的下一个相邻元素中设置clear:both; |
1 <!-----HTML代码----> 2 <div class=‘clear‘ > 3 <div class=‘fl‘>左浮动</div> 4 <div class=‘fr‘>右浮动</div> 5 </div> 6 <div class=‘cnt‘>content</div> 7 1 /***********CSS代码***********/ 2 .fl{float:left;} 3 .fr{float:right;} 4 .clear{ 5 float:left; 6 } 7 .cnt{ 8 clear:both; 9 } |
缺点：可能会出现新的浮动问题 |
建议：伪元素清除浮动应用于网页主体排版，overflow清除浮动应用于网页中具体内容的一些小模块；但是有时候要具体情况具体分析，能达到想要的效果就是好方法！
标签：text height float 自适应高度 idt htm table enter clear
原文地址：http://www.cnblogs.com/wendaoqing/p/CSS.html
