css拾遗(12)-BFC
2022-04-20 本文已影响0人
姜治宇
BFC是块级格式化上下文的意思，全称block formatting context，这是元素自带的属性，可通过overflow来触发它。
BFC里的内容，不会跟外部的元素重叠或者互相影响。如果给元素增加clear属性，它只会清除自身所在BFC内的浮动。
给元素添加以下的任意属性值都会创建BFC。
1、 float: left或right，不为none即可。
2、 overflow:hidden、auto或scroll，不为visible即可。
3、display:flex
4、 position:absolute或position: fixed
看个例子：
1.png
<!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>
.content{
max-width:1080px;
margin: 0 auto;
}
.media{
float:left;
width:50%;
padding:10px;
background-color: lightblue;
border-radius: 6px;
}
.media-image {
width:200px;
height:100px;
float:left;
margin-right:20px;
}
</style>
</head>
<body>
<div class="content">
<div class="media">
<img class="media-image" src="https://img2.doubanio.com/view/note/l/public/p82460871.webp" alt="" />
<div class="media-body">
<h4>宫崎骏电影</h4>
<p>精选宫崎骏经典语录大全 宫崎骏经典语录大全 1、爱,不是寻找一个完美的人,而是学会用完美的眼光欣赏那个不完美的人。 2、不管前方的路有多苦,只要走的方向正确,不管多么崎岖...</p>
</div>
</div>
</div>
</body>
</html>
2.png
怎么实现呢？
直观上的理解，我们可以清除一下图片底部的浮动，然后让文字右浮动即可。
<!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>
/*如果用float布局，清除浮动*/
.clearfix::before,
.clearfix::after {
display: table;
content: " ";
}
.clearfix::after {
clear: both;
}
.content {
max-width: 1080px;
margin: 0 auto;
}
.media {
float: left;
width: 50%;
padding: 10px;
background-color: lightblue;
border-radius: 6px;
}
.media-image {
width: 200px;
height: 100px;
float: left;
margin-right: 20px;
}
.media-body {
float: right;
}
</style>
</head>
<body>
<div class="content">
<div class="media">
<img class="media-image clearfix" src="https://img2.doubanio.com/view/note/l/public/p82460871.webp" alt="" />
<div class="media-body">
<h4>宫崎骏电影</h4>
<p>精选宫崎骏经典语录大全 宫崎骏经典语录大全 1、爱,不是寻找一个完美的人,而是学会用完美的眼光欣赏那个不完美的人。 2、不管前方的路有多苦,只要走的方向正确,不管多么崎岖...</p>
</div>
</div>
</div>
</body>
</html>
3.png
我们希望左侧图片和右侧文字之间互不干扰，所以就要用到BFC，将文字区域增加overflow属性，即可达到目的。
<!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>
.content{
max-width:1080px;
margin: 0 auto;
}
.media{
float:left;
width:50%;
padding:10px;
background-color: lightblue;
border-radius: 6px;
}
.media-image {
width:200px;
height:100px;
float:left;
margin-right:20px;
}
.media-body {
overflow: auto;/*创建BFC*/
}
</style>
</head>
<body>
<div class="content">
<div class="media">
<img class="media-image" src="https://img2.doubanio.com/view/note/l/public/p82460871.webp" alt="" />
<div class="media-body">
<h4>宫崎骏电影</h4>
<p>精选宫崎骏经典语录大全 宫崎骏经典语录大全 1、爱,不是寻找一个完美的人,而是学会用完美的眼光欣赏那个不完美的人。 2、不管前方的路有多苦,只要走的方向正确,不管多么崎岖...</p>
</div>
</div>
</div>
</body>
</html>
