Float(浮动)
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。（注意：并没有完全脱离文档流）
由于浮动框不在文档的普通流中，所以文档在普通流中的块框表现得就像浮动框不存在一样。即浮动元素的位置会被正常文档流中的元素占据。
Float带来的影响：会导致父元素高度塌陷。
给元素添加float属性后，会使得该元素具有行内块的特性。
行内块的特性：可以一行放多个，有宽度和高度，默认情况下盒子的大小是由内容决定的。
清除浮动的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
.container {
width: 500px;
border:1px solid black;
}
.child {
float:left;
background-color: gray;
height:100px;
width: 100px;
}
.next {
width: 300px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
<div class="next"></div>
</body>
</html>-
额外标签法
在浮动元素末尾添加一个空标签，然后给该空标签添加clear:both的属性。
<body>
<div class="container">
<div class="child"></div>
<div style="clear:both"></div>
</div>
<div class="next"></div>
</body>-
父级元素添加overflow
.container {
width: 500px;
border:1px solid black;
overflow:hidden;
}-
after伪元素清除浮动
<body>
<div class="container clearfix">
<div class="child"></div>
</div>
<div class="next"></div>
</body>
<style>
.clearfix:after {
content:'.'; /*内容为小点，尽量加不要空。*/
display:block; /*转换为块级元素*/
height:0; /*高度为0 */
visibility:hidden; /*隐藏盒子 */
clear:both; /*清除浮动 */
}
</style>注意.clearfix类名应该是加在浮动元素的父级元素上。
由于IE6-7不支持:after，使用zoom:1触发。
.clearfix {
*zoom:1;
}-
使用before和after双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:'';
display:table; /*触发BFC */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1
}
扫一扫
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
