浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用.
网页布局第一准则:多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动特性
1.浮动元素会脱离标准流(脱标)
脱离标准普通流的控制,移动到指定位置,且浮动的盒子不再保留原先的位置
当为粉色div设置浮动后,其原有的位置空出,表现为压住了原来在其下方的蓝色div.
浮动元素只能影响在其后面的标准流
粉色div为标准流独占一行,蓝色div另起一行且浮起不占原有位置,绿色标准流div占据蓝色div的原有位置.
粉色浮动,蓝色标准流div占据其原有位置且独占一行,绿色浮动div另起一行浮动显示.
2.浮动的元素会一行内显示并且元素顶部对齐
若父级元素的宽度不够,则会自动换行,另起一行重新对齐排列.
3.浮动的元素会具有行内块元素的特性
任何元素都可以浮动,浮动的元素会具有行内块元素的特性.
清除浮动
由于父级盒子很多情况下，不方便给高度，最好由子元素撑开. 但是子盒子浮动又不占有位置，当不设置父级盒子高度时，就会影响下面的标准流盒子,所以需要清除浮动
1.额外标签法:浮动元素的末尾添加一个清除浮动的空标签(必须是块元素).
<div style="clear: both;"></div>
2.为父元素添加 overflow:hidden;(属性值为auto或者scroll也可) 缺点是无法显示溢出的部分
3.:after伪元素法,相当于额外标签法的升级版,在父元素里面的最后添加了一个空的块元素.优点是没有真的增加标签,结构简单.
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6,7专有 */
*zoom: 1;
}
4.双伪元素清除浮动,代码比伪元素法稍简洁.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
width: 630px;
background-color: pink;
margin: 10px auto;
}
.top ul li {
float: left;
width: 150px;
height: 240px;
background-color: skyblue;
margin-right: 10px;
margin-bottom: 10px;
}
.top ul .last {
margin-right: 0px;
}
.bottom {
background-color: aquamarine;
height: 40px;
}
.clearfix::before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6,7专有 */
*zoom: 1;
}
</style>
<body>
<div class="top clearfix">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="bottom"></div>
</body>
</html>
显示效果
