浮动布局方式
如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流)。
可选值：
none，默认值，元素默认在标准流(文档流/普通流)中排列；
left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动；
right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动；
当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离标准流(文档流/普通流)，元素脱离标准流(文档流/普通流)以后，它下边的元素会立即向上移动，那么这个时候前面一个元素就会盖住后面一个元素。
元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素。如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。浮动的元素不会超过他上边的兄弟元素，最多一边齐。
浮动元素子围现象
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象。
【注】：1.浮动流中没有居中对齐, 也就是没有center这个取值；
2.在浮动流中是不可以使用margin: 0 auto。
特点:：1.在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是块级元素/行内元素/行内块级元素都可以水平排版；
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高；
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像。
高度塌陷
原因：在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
后果：由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
解决方法： 1.在子级元素后添加一个空元素，为其添加clear:both 弊端：增加了无意义的元素结构。
2.给父级元素设置一个overflow:hiddden， 解决了第一种方法的弊端
3.::after 为需要清除浮动元素的伪对象中设置height:0，
#layout:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
清除浮动的方法
父子级：
1.在子级元素后添加一个空元素，为其添加clear:both 弊端：增加了无意义的元素结构。
2.给父级元素设置一个overflow:hiddden，解决了第一种方法的弊端。
3.::after 为需要清除浮动元素的伪对象中设置height:0，
#layout:after{
clear:both;
content:”";
visibility:hidden;
height:0;}
（用伪类清除浮动时用after，并且加上content：""可以加内容也可以不加，但是一定要加上display： block；同时还要写clear：both；）
【最推荐使用第二种】
兄弟级：
给当前元素（被浮动影响的元素）设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响。
BFC
定义：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。BFC(block formatting context)块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。
布局规则：
1. 内部的Box会在垂直方向一个接着一个地放置。
2. Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
3. 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动子元素也参与计算。
生成BFC的元素：
1.根元素
2.float属性不为none
3.position 为absolute或fixed
4.display为inline-block table-cell table-caption flex inline-flex
5.overflow不为visible
作用：解决浮动元素令父元素高度坍塌的问题
案例：
1.两栏自适应布局
方法：给固定栏设置固定宽度，给不固定栏开启BFC。
原理：BFC的区域不会与float box重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left {
float: left;
width: 300px;
background-color: blue;
}
.right {
overflow: auto;
background-color: red;
}
</style>
</head>
<body>
<div class="left">左边定宽</div>
<div class="right">
右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
</div>
</body>
</html>
2.三列布局：两边定宽，中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.left,.right {
width: 200px;
height: 200px;
background-color: #999;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
margin: 0 200px;
height: 300px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>
浮动布局（float）常用于实现元素的水平排列，但会导致父元素高度塌陷。BFC（块格式化上下文）是解决这一问题的关键，它可以防止元素重叠并正确计算高度。通过创建BFC（如使用`overflow:hidden`或伪元素`::after`），可以避免高度塌陷。此外，BFC在两栏自适应布局和三列布局等场景中有广泛应用。
89
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
