Float的基础知识
-
会使元素向左或者向右移动,不能上下
-
浮动原色碰到包含框或者另一个浮动框,浮动停止
-
例子1:
-
向做浮动时,浮动会飘到父容器边上就停止。222这个盒子向左浮动后,碰到333这个盒子时,停止浮动;
-
注意:漂浮会把文字往边上挤,所以222不能覆盖333文字区域。
-
-
浮动元素之后的元素将围绕它,之前的不受影响
-
浮动元素会脱离标准流
-
-
高度塌陷问题,举例,解决办法
-
浮动溢出
-
父容器中元素全漂浮,父容器则不知所措,出现浮动溢出。为了让我们能看到浮动溢出现象,我们为盒子们加了container,以及黑色边框。图中黑色边框塌陷。
-
以至于后面普通流中元素会与container内的元素重合。
-
清除浮动
-
措施:container设高度
如果动态网页从数据库取数据,我们不知道数据获取后占的高度,修改页面会比较麻烦
所以推荐后面的方法。 -
清除浮动的方法
-
方法1:在浮动元素后使用一个空元素,然后设置样式clear: both
-
clear的意思是,清除float对左、或者右边元素影响
-
clear也可以理解为抗浮动,只影响自身,不影响相邻元素
-
方法2:在浮动元素的容器(父元素)添加样式 overflow: hidden;
-
overflow:消掉溢出的部分
-
方法3:.clearfix:after{
content: "."; display: block; height: 0; visibility: hidden; clear: both;}
.clearfix { *zoom: 1;}