浮动
在我看来浮动元素都是脱离了躯壳的灵魂,有其神而无其形(没有高度),他们存在于世间,但世人却无法看见他们(脱离文档流,块级元素可占据他们的位置),但是风雨等大自然因素却可以洞察到他们的存在,从而环绕其周围(不脱离文本流,内联元素可环绕在其周围)。
-
浮动元素的外边距不会合并
-
浮动非替换元素时必须设定宽度
-
浮动元素会脱离文档流但不会脱离文本流,因而会造成文本环绕效果,而这也是浮动的本意。
-
不管是块级元素还是内联元素,一旦浮动就会变成行内块元素(即display: inline-block;)
-
如果浮动元素应用了负外边距而导致其与相邻元素重叠,分两种情况:
-
行内框与一个浮动元素重叠时,其边框、背景和内容都在该浮动元素之上显示
- 块框与一个浮动元素重叠时,其边框和背景都在该浮动元素之下显示,而内容在浮动元素之上显示
清除浮动
上面提到过浮动元素是不具备高度的,因此会造成父元素高度塌陷,可以通过以下方法来清除浮动。不仅要知道什么方式可以清除浮动,更要知道这些方法是如何清除浮动的。
浮动父元素
CSS 2.1中提到了浮动的一个特性:浮动元素会延伸,从而包含其所有后代元素。但这有点拆了东墙补西墙的意味,不推荐。
应用对象:父元素
overflow属性
overflow 属性本意是规定了当内容溢出元素框时发生的事情。但当其属性值为hidden或auto时,它会自动的清理包含的任何浮动元素,也就意味着它是认可浮动元素的高度的。但在某些情况下,使用该方法会产生滚动条或截断内容。所以使用时需谨慎。
应用对象:父元素
clear属性
clear属性会给该元素添加足够的外边距,从而达到清除浮动的效果。clear 属性的值可以是:left、right、both或none。
应用对象:相邻元素
伪元素
在没有现成元素可以应用clear属性时,我们可以使用伪元素:
.clearfix::after {
content: '';
display: block;
visibility: hidden;
height: 0;
clear: both;
}
注:after 会在元素内容后面而不是元素后面插入一个伪元素。
应用对象:父元素
空元素
当然,我们也可以直接在浮动元素后面添加一个空元素,如下:
<div style="clear:both;"></div>
同样可以达到清除浮动的效果,但会增加不必要的代码,不推荐。