CSS浮动
- (1)页面布局方式
- (2)浮动
- (3)清除浮动
1 页面布局方式
页面布局方式主要包含：文档流（常规流）、浮动流（脱离文档流）。
文档流：
- 文档流中元素框的位置由元素在HTML中的位置决定，块级元素从上到下依次排列，框之间垂直距离由框的垂直margin计算得到，行内元素在一行中水平布置。
- 文档流就是HTML文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后顺序依次显示。块级元素就占一行或多行，行内元素就和其它元素共处一行。
浮动流：元素从正常的排列顺序被抽离
- 浮动可以使元素向左或向右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在正常文档流中，所以标准文档流中的块框表现得就像浮动框不存在一样。
2 浮动
浮动属性：
float:left(向左浮动)/right(向右浮动)/none(默认值)- float属性定义元素在哪个方向浮动，通过float属性实现元素的浮动，以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框。而不论它本身是何种元素。
- 如果浮动非替换元素,则要指定个明确的宽度;否则，它们会尽可能地窄。
2.1 左浮动
对div2进行左浮动,效果如右图所示。
#div2{
float:left;
}
div2虽然保持在当前位置，实际上已经不在文档流中，而在浮动流中，然后文档流就出现空缺，于是文档流下面的div3,div4就顶上去，与div1形成新的文档流。
如果浮动前面的元素没有浮动属性，则浮动会另起一行在此元素的下面浮动。
2.2 右浮动
对div2进行右浮动,效果如图所示。
#div2{
float:right;
}
当第二个div设置为向右浮动，那么它就不属于文档流，而是成为了浮动流，剩下的div1,div3,div4重新排列。
浮动元素不在文档流中，所以浮动后面紧跟着的元素占据了浮动原先位置。
当一个元素浮动之后，其下方装载文字的容器虽然会占据浮动元素原先的位置，但是其中的文字会一直围绕在浮动元素周围，而不会被浮动元素覆盖
2.3 两个元素同时左浮动
对div2和div3设置左浮动,效果如图所示。
#div2,#div3{
float:left;
}
说明：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)
2.4 一个元素左浮动一个元素右浮动
对div2设置左浮动,div3设置右浮动，主要应用于两列网页的布局，效果如图所示。
#div2{
float:left;
}
#div3{
float:right;
}
2.5 总结
- 浮动元素不在标准文档流中，所以浮动后面紧跟着的元素占据了浮动元素原先的位置。
- 浮动是比较特殊的个体，它虽然不在标准文档流中，但是任然跟标准文档流相互影响。
- 如果浮动前面的元素美誉浮动属性，则浮动会另起一行在此元素的下面浮动。
- 当一个元素浮动之后，其下方装载文字的容器虽然会占据浮动元素原先的位置，但是其中的文字会一直围绕在浮动元素周围，而不会被浮动元素覆盖。
3 清除浮动
3.1 浮动产生的副作用
- 背景不能显示：如果对父级设置了css背景色或背景图片，而父级不能被撑开，导致背景不能显示。
- 边框不能被撑开
- margin，padding不能正确显示，特别是上下边的margin和padding不能正确显示。
3.2 清除浮动方法
清除浮动：
clear:left/right/both/noneclear属性规定元素的哪一侧不允许其它浮动元素。
- left:在左侧不允许浮动元素。
- right:在右侧不允许浮动元素。
- both:在左=两侧不允许浮动元素。
- none:默认值，允许浮动元素出现在两侧。
其它清除浮动的方法：
- 在父级元素添加最后一个子元素，子元素设置样式clear:both;
- 给父级元素设置高度(针对背景不能显示问题)
-
设置after为元素
div:after{display:block;clear:both;content:"";}
- 父级div定义overflow:hidden和zoom:1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*#div1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#div2 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
#div3 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#div4 {
width: 100px;
height: 100px;
background-color: lawngreen;
float: left;
}*/
</style>
</head>
<body>
<!-- <div id="div1"></div>
<div id="div2"></div>
<div style="width: 100px;height:100px"></div>
<div id="div3"></div>
<div id="div4"></div> -->
<div id="div1" style="width: 200px;height:100px;background-color:red;">div1</div>
<div id="div2" style="float:left;width: 400px;height:100px;background-color:blue;">div2</div>
<div id="div3" style="float:right;width: 150px;height:150px;background-color:aqua;">div3</div>
<div id="div4" style="width: 100px;height:120px;background-color:green;">div4</div>
</body>
</html>