1. 理解浮动
- 浮动是CSS2就有的特性；
- 浮动元素会脱离文档流；
- 浮动的元素会根据浮动的方向按文档从上到下的顺序向当前行的左边或右边对齐；
- 浮动元素会挨着包含它的边或者浮动元素的边；
- 如果当前行没有足够的空间，它将下移一行，直到有足够的空间。
先来看看效果图：
可以发现原本顺序排在第三位的灰色图片因为设置了float: left;而排在了第二位（向前面向左浮动的元素对齐），原本顺序排在第四位的图片因为设置了float:right；而排在了第三位（向前面向右浮动的元素对齐）。
<style>
.float1 {
padding: 20px;
}
.float1 .thumbnail-left {
float: left;
margin: 5px;
background-color: #5250507a;
}
.float1 div {
width: 107px;
height: 90px;
}
.float1 .thumbnail-right {
float: right;
margin: 5px;
background-color: #e01b1b81;
}
</style>
<body>
<h3>理解浮动</h3>
<div class="float1">
<div class="thumbnail-left">盒子1</div>
<div class="thumbnail-right">盒子2</div>
<img class="thumbnail-left" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail-right" src="/images/klematis4_small.jpg" width="120" height="90">
</div>
</body>
2. 浮动的问题
然而由于浮动元素会脱离文档流，那么包含浮动元素的父元素的高度就不能被撑开。（可以想象一下，浮动元素浮在空中，父元素在地面，无法获取浮动元素的高度）
包含浮动元素的父元素不会被撑开，就可能造成以下问题：
- 父元素内浮动元素后的非浮动元素被浮动元素遮挡；
- 在父元素之后的兄弟元素会被浮动元素遮挡。
-
情况一：父元素内浮动元素后的非浮动元素被浮动元素遮挡；
<style>
.float1 {
padding: 20px;
border: 2px solid #666;
}
.float1 .thumbnail-left {
float: left;
margin: 5px;
background-color: #525050eb;
}
.float1 div {
width: 107px;
height: 90px;
}
.float1 .thumbnail-right {
float: right;
margin: 5px;
background-color: #e01b1b81;
}
.box {
width: 100px;
height: 50px;
background-color: rgb(240, 189, 23);
}
</style>
<body>
<h1>浮动存在的问题</h1>
<div class="float1">
<div class="thumbnail-left"></div>
<div class="thumbnail-right"></div>
<img class="thumbnail-left" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail-right" src="/images/klematis4_small.jpg" width="120" height="90">
<div class="box"></div>
</div>
</body>
2. 情况二：在父元素之后的兄弟元素会被浮动元素遮挡。
<style>
.float1 {
padding: 20px;
border: 2px solid #666;
}
.float1 .thumbnail-left {
float: left;
margin: 5px;
background-color: #5250507a;
}
.float1 div {
width: 107px;
height: 90px;
}
.float1 .thumbnail-right {
float: right;
margin: 5px;
background-color: #e01b1b81;
}
.box {
width: 100px;
height: 50px;
background-color: aquamarine;
}
</style>
<body>
<h1>浮动存在的问题</h1>
<div class="float1">
<div class="thumbnail-left"></div>
<div class="thumbnail-right"></div>
<img class="thumbnail-left" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail-right" src="/images/klematis4_small.jpg" width="120" height="90">
</div>
<div class="box"></div>
</body>
3. 浮动的其他特性
浮动的设计初衷是为了有文字环绕图片的效果，确保浮动效果的元素不会遮挡其他元素的文字，从而保持信息的可读性和视觉上的美观。
因此浮动元素还有一个特点就是不会遮挡住文本、行内块、图片。
-
文本
-
行内块元素
-
img元素
4. 清除浮动
清除浮动就是解决浮动带来的问题。
解决方法：
- 父级div定义height;
- 结尾处加空div标签clear:both;
- 父级定义overflow:hidden;
- 父级也浮动起来;
- 父元素display:flow-root；
清除浮动的方法有很多，以上方法是解决父元素之后的非浮动元素遮挡问题，并且需要考虑兼容性，因此需要具体问题具体分析！
