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最初设计浮动样式就是为了实现文字环绕的效果
解决方法
为文字部分添加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.