目录
CSS浮动
标准流
标准流又称为文档流，就是浏览器在渲染显示网页内容时默认采用的一套排版规则，即标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列。
浮动
引入浮动属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边，后来浮动被用来实现整个网站页面的布局，它使信息列得以横向排列。
浮动的作用
就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了（图文环绕和网页布局）
虽然我们可以通过display：inline-block来使不同的div盒子排列在一排，但是会有一个缺点，就是不同的盒子之间会存在空隙，并不能使两个盒子紧凑。
我们来观察下列例子：
<html>
<head>
<style>
div{
display: inline-block;
height: 100px;
width: 200px;
}
.box1{
background-color: aqua;
}
.box2{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box1">盒子3</div><div class="box2">盒子4</div>
</body>
</html>
观察可得：
- 第一个盒子与第二个盒子之间有空隙
- 第二个盒子与第三个盒子之间没有空隙
原因是在我们编写的代码当中第三个盒子</div>与第四个盒子<div>之间没有换行符号，而第一个盒子的</div>和第二个盒子<div>（第二个盒子</div>与第三个盒子<div>）。但是在实际开发中，不会将所有块元素写成这样，所以我们会使用浮动来实现块元素并排并使其紧凑。
浮动的特点
- 浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。浮动的元素总是找距离它最近的父级元素对齐，但是不会超出内边距的范围。
- 浮动比标准流高半个级别，可以覆盖标准流元素。
- 浮动的元素不能在设置text-align:center和margin: 0 auto。
- 浮动的元素排列位置，跟上一个块级元素（A元素）有关系。如果A元素有浮动，则下一个元素（B元素）顶部会和A元素的顶部（此时A.B元素均已经浮动）对齐；如果A元素是标准流（未浮动），则B元素的顶部会和A元素的底部对齐。
我们来了解一下什么是浮动
<html>
<head>
<style>
.box1{
float: left;
height: 50px;
width: 100px;
background-color: aqua;
}
.box2{
float: left;
height:30px;
width: 150px;
background-color: beige;
}
.box3{
height: 80px;
width: 250px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
</body>
</html>
观察可得：
- 盒子1和盒子2并排排放并且中间没有空隙
- 盒子3的部分红色背景被盒子1和盒子2覆盖
- 而且“盒子3”的文字，出现在盒子2整体的下方，而并不是在一个盒子的最前端
分析（原因在浮动的特点中都有，只是借助具体案例分析）
- 盒子1和盒子2在第一行紧贴是由于float:left的缘故
- 盒子1和盒子2保持.box1和.box2中设置的颜色样式，是因为浮动的优先级高于标准流
- 盒子3的文字位置在整个盒子2下方是因为浮动脱离标准流，不占位置，“盒子3”文字会出现在盒子3里面
清除浮动
准确地说，并不是清除浮动，而是清除浮动后造成的影响，解决父级元素因为子级浮动引起内部高度为0的问题
1. 额外标签法
方式：改变文档结构，在div盒子中设置一个新的标签，使用clear:both可以清除浮动造成的影响
格式：<div style="clear:both"></div>
缺点： 添加许多无意义的标签，结构化较差
补充：关于clear属性的用法
clear:left 不允许左侧有浮动元素(清除左侧浮动的影响)
clear:right 不允许右侧有浮动元素(清除右侧浮动的影响)
clear:both 同时清除左右两侧浮动的影响
2. 单伪元素清除法
先向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。现在重载页面，盒子的浮动就应该清除了。这与在浮动盒子后手动添加诸如div的HTML元素，并设置其样式clear:both是等效的。
格式：
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visiblity:hidden
} 优点： 符合闭合浮动思想，结构语义化正确
缺点：可能存在不兼容现象
注：content:"."里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格
3. 双伪元素清除浮动
优点：可以同时解决外边距塌陷问题（嵌套块级标签外边距合并问题）和清除浮动
格式：
.clearfix:before,
.clearfix:after {
content="";
display:table;
}
.clearfix:after {
clear:both;
}分析：外边距塌陷是父子标签都是块级元素，子级的margin会影响到父级标签的位置
所以.clearfix::before作用是解决外边距塌陷
4. 父级添加overflow属性方法
一个替代的方案是将包裹元素的overflow属性设置为除visible外的其他值。
这个方法有用是因为创建了块格式化上下文（BFC）。可以把它看作页面内部包含所需元素的一小块布局区域。如此设置可以让浮动元素包含在 BFC及其背景之内。大部分情况下这种小技巧都可以奏效，但是可能会出现莫名其妙的滚动条或裁剪阴影，BFC在后面会有所提及
例如：
.box1{
height: 100px;
width: 400px;
background-color: aqua;
overflow:hidden
}优点：方便
缺点：可能会出现莫名其妙的滚动条或裁剪阴影
这是出现浮动影响的代码以及生成的样式
<html>
<head>
<style>
.box1{
float: left;
height: 100px;
width: 400px;
background-color: aqua;
}
.box2{
float: left;
height:80px;
width: 900px;
background-color: beige;
}
.box3{
/* height: 200px; */
width: 1500px;
background-color: grey;
}
.box4{
height:80px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4"></div>
</body>
</html>
我们使用双伪元素清除浮动的代码以及最后的效果
<html>
<head>
<style>
.box1{
float: left;
height: 100px;
width: 400px;
background-color: aqua;
}
.box2{
float: left;
height:80px;
width: 900px;
background-color: beige;
}
.box3{
/* height: 200px; */
width: 1500px;
background-color: grey;
}
.box4{
height:80px;
background-color: pink;
}
.clearfix::before,
.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear:both;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3 clearfix">盒子3</div>
<div class="box4"></div>
</body>
</html>
1404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
