普通流(标准/文档流):盒子自上而下,从左到右排列,
浮动:让多个盒子(块级元素)在一行内显示 脱离文档流,会影响标准流,对后面的盒子有影响
<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;
}