核心提示：首先了解一下浮动的原理：给元素设置float属性后，该元素会脱离文档流，进行左右浮动，紧贴着父元素的左右边框。此元素空出的位置，由后续元素填充上去。dom结构：p class=containerp c...
首先了解一下浮动的原理：给元素设置float属性后，该元素会脱离文档流，进行左右浮动，紧贴着父元素的左右边框。此元素空出的位置，由后续元素填充上去。
dom结构：
<p class="container">
<p class="left">hellop>
<p class="right">worldp>
p>
style样式：
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid red;
}
.left {
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
.right {
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
父元素高度不能被撑开时，清除浮动的方法：
1.为父元素添加css属性
overflow: hidden;
2.在父元素子元素的末尾添加一个空的元素
添加后dom结构为：
<p class="container">
<p class="left">hellop>
<p class="right">worldp>
<p class="clear">p>
p>
设置
.clear {
clear: both;
}
3.为父元素添加伪类
.container:after { content: '.'; height: 0; clear: both; display: block; }
4.为父元素添加绝对定位属性
position: absolute;
5.为父元素设置高度
height: 110px;
6.将父元素浮动
float: left;
