float原本是用于“文字环绕元素”的效果，但是，平时我们经常在布局上用float属性。那么，使用float时，需要注意些什么呢？
1. float元素的表现
- 与绝对定位不同，float并没有使元素脱离文档流。
- 浮动元素在原文档流位置向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 文本和内联元素围绕浮动框排列。
- 块元素无视浮动框，按文档流定位。
- 包裹浮动框的父元素会忽略浮动框高度。
可见，有两点需要理解：一是浮动框本身如何浮动；二是，与浮动框毗邻的内联/块元素如何定位。
下面看几个例子：
Demo 1
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
<style>
#box1 {
border: 5px solid blue;
}
#box2 {
border: 3px solid green;
background: lightgrey;
}
#box3 {
float: right;
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
</div>
<div id="box3">
</div>
</div>
</body>
</html>
效果图：
float1.png
分析：
浮动元素box3表现为脱离文档流，右浮动，浮动元素没有撑开父元素。
Demo 2
在Demo 1的基础上，交换box2和box3的位置。
<div id="box1">
<div id="box3">
</div>
<div id="box2">
这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
</div>
</div>
效果图：
float2.png
可见，与浮动元素毗邻的块元素会忽视浮动元素定位，但是，块元素中的文本围绕浮动元素排列。
2. 清除浮动属性 clear
clear可以用于清除浮动，既可用于浮动框，也可用于非浮动元素。
参考mozilla的定义：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear
- 当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致[margin collapsing]不起作用。
- 当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。
关键点在，应用了clear属性的元素，会移动到浮动元素的下方。
在Demo 2的基础上，做样式修改，将clear用在非浮动块上。
#box2 {
border: 3px solid green;
background: lightgrey;
clear: both;
}
clear1.png
下一步，我们创建多个浮动块，尝试将clear应用在浮动块上。
多个浮动块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
<style>
#box1 {
border: 5px solid blue;
}
#box2 {
border: 3px solid green;
background: lightgrey;
}
#box3 {
float: right;
border: 2px solid red;
width: 100px;
height: 100px;
}
#box4 {
float: left;
border: 2px solid yellow;
width: 120px;
height: 120px;
}
#box5 {
float: left;
border: 2px solid purple;
width: 150px;
height: 150px;
}
#box6 {
float: right;
border: 2px solid brown;
width: 110px;
height: 110px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box3">
box 3
</div>
<div id="box2">
这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
</div>
<div id="box4">box 4</div>
<div id="box5">box 5</div>
<div id="box6">box 6</div>
</div>
</body>
</html>
float3.png
在box 5上应用清除浮动，首先清除左浮动：clear: left;，这时，box 5移动到左浮动元素box 4的下面，在以float:left方式向左浮动。
#box5 {
float: left;
border: 2px solid purple;
width: 150px;
height: 150px;
clear: left; /*清除左浮动*/
}
clear float 1.png
如果在box 5清除右浮动：clear: right;，那么，它会移动到右浮动元素box 3的下面，再以float:left方式向左浮动。
#box5 {
float: left;
border: 2px solid purple;
width: 150px;
height: 150px;
clear: right; /*清除右浮动*/
}
clear float 2.png
3. 如何解决浮动导致的父元素高度塌陷？
由于浮动元素不会撑开父元素高度，所以视觉上造成父元素塌陷的效果。那么，有如下常见的解决方案：
<div id="box" class="clear">
<div id="child">a float box</div>
<div id="blank"></div>
</div>
<style>
body {
padding: 100px;
}
#box {
border: 2px solid red;
}
#child {
float: left;
width: 100px;
height: 100px;
border: 2px solid green;
}
/*方法一*/
.clear {
overflow: hidden;
}
/*方法二*/
.clear:after {
display: block;
content: '';
clear: both;
}
/*方法二*/
#blank {
clear: both;
}
</style>
微信公众号：
网友评论