CSS中清除浮动的两种方式

　　在CSS中，父元素中的子元素如果使用了float，会导致父元素塌陷，高度为0。

　　对于这种情况，常见的解决方式有两种。

一、增加新的div，应用clear:both属性

html:

1 <div class="father">
2     <div class="div1">1div>
3     <div class="div2">2div>
4     <div class="div3">3div>
5     <div class="clear">div>
6 div>

css:

1 .clear {
2     clear:both;
3     height:0;        
4 }

二、利用:after来清除浮动

原理：这种方法的原理是利用伪类:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其原理类似第一种方式，但区别在于这种方式是利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

首先需要给父元素添加一个.clear类

css如下

.clear:before,
.clear:after {content: '';display: table;
}
.clear:after {clear: both;
}
.clear {*zoom: 1; //兼容IE6、IE7
}

转载于:https://www.cnblogs.com/tgxh/p/6135615.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！