普通流（标准/文档流）：盒子自上而下，从左到右排列，
浮动：让多个盒子（块级元素）在一行内显示 脱离文档流，会影响标准流，对后面的盒子有影响
<style>
/*普通流 盒子自上而下排列
.up{
width: 300px;
height: 200px;
background-color:pink;
}
.down{
width: 300px;
height: 200px;
background-color:green;
}*/
/*浮动*/
.up{
width: 300px;
height: 200px;
background-color:pink;
float:left;
}
.down{
width: 320px;
height: 220px;
background-color:green;
}
</style>
</head>
<body>
<div class="up"></div>
<div class="down"></div>
</body>浮动元素不会跨越父元素的padding，border
一个父盒子里面，一个子盒子有浮动，则其他子盒子也要有浮动
加浮动后，会有行内块元素特性
如果已经给行内元素加浮动，此时不需转换也有宽高
清除浮动：为了解决父级元素因为子级浮动引起内部高度为0的问题。
清除浮动方法：
1：额外标签法： clear 如果清楚了浮动，父亲去自动检测孩子的高度，以最高为准
clear:both/right/left /*清除浮动*/
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<div class="clear"></div><!-- 最后一个浮动标签后添加一个标签 清除浮动 -->
</div>
</body>缺点：添加许多无意义标签，结构化差
2：给父级添加 overflow:hidden;
3: 伪类
.clearfix:after{
/*正常浏览器清除浮动*/
content:"";
display:block;
height: 0;
clear:both;
visibility:hidden;
}
.clearfix{*zoom:1;} /* zoom 1 IE 6专用器清除浮动 *zoom 1 ie7以下版本识别*/4：双伪类 before和after
/*双伪类*/
.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
扫一扫
2432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
