目录
1.同一个BFC下外边距会发生折叠（body本身就是一个BFC盒子）
一、布局方式
(1)普通流
元素按照其在HTML中的先后位置由上而下布局。
(2)浮动布局(float)
元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移。
(3)绝对定位(absolute)
在绝对定位布局中，元素会脱离普通文档流。
二、BFC概念
BFC (block formatting contexts)块级格式上下文。属于定位方案中的普通流。是一个独立的空间，里面的元素不会影响外面的元素。
三、如何触发BFC
1.body根元素(本身就是)
2.float:left/right
3.diaplay:inline-block/table-cell/flex
4.overflow:hidden
5.position:adsolute/fiexd
四、BFC特性以及应用
1.同一个BFC下外边距会发生折叠（body本身就是一个BFC盒子）
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div> 
1.1 如何解决外边距折叠
// 将他们放在不同的BFC容器里.
<style>
.bfc{
display: inline-block;
}
.one ,.two{
width: 100px;
height: 100px;
background-color: aqua;
margin: 20px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="bfc">
<div class="two">
2
</div>
</div>
</body>
2、BFC可以清除浮动，解决塌陷
// 子盒子浮动，父元素出现塌陷。
<style>
div{
border: 1px solid rebeccapurple;
}
.one{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<div>
<div class="one">1</div>
<div class="one">1</div>
</div>
</body>
2.1 如何清除浮动，解决塌陷
//父盒子变为BFC容器
<style>
div{
border: 1px solid rgb(211, 58, 58);
overflow: hidden;
}
.one{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<div>
<div class="one">1</div>
<div class="one">1</div>
</div>
</body>
3. BFC阻止元素被浮动元素覆盖(左固定，右侧自适应)
// 浮动元素覆盖下一个元素(文字环绕图片的实现)
<body>
<div style="width:100 ; height:100px ;background-color:rebeccapurple ; float: left;">
左浮动</div>
<div style="width:200px ; height: 200px; background-color: rgb(44, 149, 187);">
</div>
</body>
3.1 如何解决浮动元素覆盖其他元素
//其他元素变为BFC容器
<body>
<div style="width:100 ; height:100px ;background-color:rebeccapurple ; float: left;">
左浮动</div>
<div style="width:200px ; height: 200px; background-color: rgb(44, 149, 187);display: inline-block;">
</div>
</body> 
1823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
