BFC
BFC(Block Formatting Context),中文为块级格式化上下文。它 为元素提供一个独立的容器，在该容器中按照一定规则进行布局排列，容器内元素不会影响外部元素，外部元素不会影响内部元素。
触发BFC的情况
- float不为none
- position为absolute或fixed
- overflow不为visible
- display为inline-block或table或flow-root
产生BFC的元素
display为block、list-item、table的元素
BFC可处理的情况
清除元素内部浮动
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 350px;
background-color: blue;
margin: 10px auto;
}
.child{
width: 100px;
height: 100px;
float: left;
line-height: 100px;
text-align: center;
background-color: cornsilk;
}
</style>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
原因：
- 父元素没设置高度
- 子元素设置了float浮动，脱离了文档流，父元素无法统计到子元素的大小
解决方法
- 给父亲加高度
- 父亲加float,不设为none即可
- 父亲加position，设为absolute或fixed
- 父亲加overflow:hidden
- 父亲加display:inline-block
- 子元素后添加一个空元素，设置样式为clear:both;
margin-top塌陷
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 350px;
height: 350px;
background-color: blue;
}
.child{
width: 100px;
height: 100px;
background-color: cornsilk;
margin: 10px auto;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
解决方法
1.为父元素添加可触发BFC效果的属性
2.为父元素添加不为0的边框
垂直方向的margin重叠
<div class="parent">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
</div>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 200px;
height: 500px;
background-color: blue;
}
.child{
width: 100px;
height: 100px;
margin: 0 auto;
line-height: 100px;
text-align: center;
}
.child1{
background-color: crimson;
margin-bottom: 20px;
}
.child2{
margin-top: 50px;
margin-bottom: 70px;
background-color: cyan;
}
.child3{
margin-top: 50px;
background-color: darkorange;
}
</style>
解决方法
为每一个子元素分别添加一个父元素，并设置可触发BFC的样式。
自适应布局–文字绕图
<div class="parent">
<img src="./img/xh_img3.jpg" alt="" class="img">
<div class="text">每一个男子全部都有过这样的两个女人，至少两个。娶了红玫瑰，久而久之，红的变成墙上的一抹蚊子血，白的还是‘床前明月光’；娶了白玫瑰，白的便是衣服上沾的一粒饭黏子，红的却是心口上一颗朱砂痣。</div>
</div>
*{
margin: 0;
padding: 0;
}
.parent{
width: 200px;
height: 250px;
border: 1px solid #000;
}
.img{
width: 100px;
height: 100px;
float: left;
}
.text{
background-color: darkturquoise;
}
css最初设计浮动样式就是为了实现文字环绕的效果
扫描二维码关注公众号，回复：
14805040 查看本文章
解决方法
为文字部分添加overflow:hidden
自适应布局
设置overflow之后，就出现了自适应布局：左侧宽度固定，右侧自适应。
脱离文档流
块级元素与行内元素
HTML角度来说，标签分为
- 文本级标签：p、span、a、b、i、u、em…
- 容器级标签：div、h、ul、ol、dl、li…
CSS 角度来说，标签分为：
- 行内元素：span、a、img、i、em… 文本级标签中除p元素外
- 块级元素：div、h、ul、ol、dl容器级标签+p标签
块级元素与行内元素区别
- 块级元素无论宽高多少都独占一行，行内元素无宽高，用内容撑开
- 块级元素不设宽高的话，宽度与父元素相同，高度靠内容撑开，无内容则为0.
- 容器级标签内部可嵌套任何元素，文本级标签只能放置文字、图片、表单元素。
- p标签在html角度是文本级标签，只能放文字、图片、表单元素
- h标签、p、dt 这几个块级元素只能包含行内元素，不可再包含块级元素
块级元素与行内元素转换
- 行内元素设置display:block,以块级元素显示
- 块级元素设置display:inline,以行内元素显示
- 为使元素既能不独占一行，又能设置宽高，出现了行内块级元素，display:inline-block.
标准文档流
标准文档流指元素排版布局过程中，元素默认从左到右，从上到下的布局方式，自动换行
标准文档流等级
块级元素：
- 即使宽度足够，块级元素也是独占一行，不与其它元素并列
- 可设置宽高，有效果
- 若不设宽高，宽度与父元素相同
行内元素：
- 与其它元素并排
- 设置宽高无效，内容撑开
脱离标准文档流
标准文档流限制很多，比如要实现既要并排，又要设置宽高，此时就要脱离标准文档流。脱离文档流有三种方式：
1.浮动
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
.parent{
width: 800px;
height: 100vh;
background-color: cornsilk;
border: 1px solid #000;
}
.one{
width: 600px;
height: 200px;
background-color: cadetblue;
float: left;
}
.two{
width: 100px;
height: 200px;
background-color: darkgoldenrod;
}
.one和.two都设置float时，只要不为none，就脱离了标准文档流，两者都有宽高且能并排。浮动元素具有贴靠的特性，不设置的话，各元素之间是紧紧靠在一起的。
但是父元素无高时，由于子元素是浮动的，导致父元素无高，此时就可以使用BFC效果，加overflow或直接给父级加高度、加伪元素清除浮动。
注意：要养成设置宽高的好习惯；设置浮动时，要浮动就一起浮动，且一定要清除浮动
2、position设为absolute或fixed
<div class="parent">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
.parent{
width: 600px;
height: 600px;
background-color: cornsilk;
border: 1px solid #000;
}
.one{
width: 50px;
height: 50px;
background-color: cadetblue;
/*设为fixed也可*/
position: absolute;
top: 0;
left: 0;
}
.two{
width: 100px;
height: 200px;
background-color: darkgoldenrod;
position: absolute;
top: 0;
left: 100px;
}
.three{
width: 200px;
height: 200px;
background-color: rgb(93, 197, 62);
float: left;
position: absolute;
top: 0;
left: 300px;
}
clear：both；清除浮动
该属性的值指出了不允许有浮动的边。使用时为浮动元素后面添加一个空元素，设置clear:both;
值可为：left、right、both.