HTML5清除浮动方式,清除浮动的4种方式，

清除浮动的4种方式，

浮动：让多个块元素可以在一行显示 让多个div放一行

问题：浮动是脱标的，因此会影响别的盒子 ,不在保留原来位置。

清除浮动的本质：解决父级元素内高为0的问题(子级浮动后)，让父级占位子。

相对于定位，在应用的时候，子绝父相，父级元素保留位置，故虽同脱标但无上述问题

清除浮动的方法：

1. 额外标签法：最后一个浮动标签后，加空盒子

1 

2. 给父级加overflow:hidden属性

1 .father {

2 border: 1px solid red;

3 width: 300px;

4 overflow: hidden; /*别加错位置了，给父亲加*/

5 /*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/

6 }

3. 用after伪元素 clearfix:after

.clearfix:after { /*正常浏览器 清除浮动*/

content:"";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

*zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/

}

4. 用after和before 双伪元素  clearfix:after  clearfix:before

.clearfix:before, .clearfix:after {

content: "";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。

相关内容

暂无相关文章