大多数 ClearFix 技术都涉及在父容器的最底部添加内容,我最喜欢伪元素方法,因为它不会将不需要的元素添加到 HTML 中。
然而,最近我发现我正在处理一个容器,其中有一些孩子漂浮,但不是全部。假设前 2 个子元素,第一个向左浮动,第二个向右浮动。我需要一种方法来清除第二个元素之后的浮动,这样下面的内容就不会被挤在它们之间。有没有办法清除中间的浮动元素但不添加clearfix元素?
下面是一个例子:
HTML
<div class="container">
<div class="child">
first child!
</div>
<div class="child">
second child!
</div>
<div class="child">
third child!
</div>
</div>
CSS
.container {
width: 200px;
}
.child:nth-child(1) {
float: left;
background: yellow;
}
.child:nth-child(2) {
float: right;
background: red;
}
.child:nth-child(3) {
background: blue;
color: white;
}
请看这个jsfiddle http://jsfiddle.net/dJxD4/看看我现在拥有什么。
Just use clear: both;
on the 3rd element, this way you don't have to use <div style="clear: both;"></div>
after the floated elements.
.child:nth-child(3) {
background: blue;
color: white;
clear: both;
}
Demo http://jsfiddle.net/dJxD4/5/
另外,如果每当您希望清除父元素而不添加额外元素或使用overflow: hidden;
这是一种肮脏的方式clear
浮动,你可以调用class
在父元素上,具有以下属性
.clear:after {
content: "";
display: table;
clear: both;
}
例如
<div class="wrapper clear">
<div class="left_floated_div"></div>
<div class="right_floated_div"></div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)