浮动的定义：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动是CSS布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。
.content {
width: 300px;
border: 2px solid;
}
.aside {
width: 100px;
background: red;
height: 100px;
float: left;
}
.main {
width: 100px;
height: 100px;
background: blue;
float: right;
}
</style>
<body>
<div class="content">
<div class="aside">左浮动</div>
<div class="main">右浮动</div>
</div>
</body>
浮动
块级元素添加浮动后，父元素没有发现，导致无法把父元素撑开，使父元素塌陷
清除浮动的方法
一. 添加空标签
在两个块级元素main下方添加一个div空标签，在其元素的style中添加clear属性：clear:both;
<style>
.box {
clear: both;
}
</style>
<body>
<div class="content">
<div class="aside">左浮动</div>
<div class="main">右浮动</div>
<div class="box">无浮动</div>
</div>
</body>
添加一个空标签后，去除左右浮动后，父元素可以发现这个普通流，父元素被这个空标签给撑开了
缺点：添加一个无意义的标签，影响整体美观性
二. 父元素定义overflow:hidden
添加overflow:hidden后，是父元素高度固定，超出固定高度后就会溢出隐藏
<style>
.content {
overflow: hidden;
}
</style>
<body>
<div class="content">
<div class="aside">左浮动</div>
<div class="main">右浮动</div>
</div>
</body>
overflow:hidden与overflow:auto相对应
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
三. 父元素定义伪元素:after
为了兼容IE6,7使用需要在父元素的样式中添加zoom: 1;添加zoom: 1;后会触发浏览器的haslayout属性，来达到类似清除浮动的效果。
<style>
.content {
*zoom: 1;
}
.content::after {
content: '';
display: block;
clear: both;
}
</style>
content是在块级标签后增加内容，添加的标签为行内元素，使用display:block;变为块级元素并清除左右的浮动，从而达到了清除浮动的效果。
以上是目前常用的三种方法，其中父元素定义伪元素:after的方法最优，另外还有其实清除浮动的方法，例如：使用定位position: absolute;、使父元素成为浮动float: left;则不需要清除浮动等方法。
网友评论