formatting context
A formatting context is a rendered area of a page that determines how its internal elements will be positioned and how they relate to other elements. That is, we have our own rendering rules. There are two types of formatting contexts:
- Block level formatting context: Block Formatting context, BFC for short
- Line level formatting context: Inline Formatting context, IFC for short
BFC
Characteristics of BFC
- Inside a BFC, the boxes are arranged one by one in the vertical direction
- Within a BFC, the adjacent margin top and margin bottom will be superimposed
- Inside a BFC, the left outer boundary of each element will be close to the left of the container containing the box, including floating
- Within a BFC, if there is a new BFC, the BFC area will not overlap with the floating element
- BFC is quite isolated one by one. How to arrange the inside will not have any impact on the outside
- When calculating BFC height, internal floating elements will also participate in the calculation.
How to create BFC
- Root element
- The float attribute is left or right
- The overflow attribute is hidden or
- position is not visibility
- The element type is inline block, table cell or table caption
Application of BFC
Avoid vertical outer margin overlay
If two boxes are in the same BFC, the outer margin in the vertical direction will be superimposed, as shown in the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.top{
background-color:yellowgreen;
width:200px;
height:50px;
margin-bottom:25px;
}
.bottom{
background-color:yellow;
width:200px;
height:50px;
margin-top:25px;
}
</style>
</head>
<body>
<!-- Under the same root element -->
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
How to solve it?
In fact, it's very simple. Just put the two boxes in different BFC s. Modify the code as follows, add a box and set the overflow: hidden attribute.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.top{
background-color:yellowgreen;
width:200px;
height:50px;
margin-bottom:25px;
overflow: hidden;
}
.middle{
overflow: hidden;
}
.bottom{
background-color:yellow;
width:200px;
height:50px;
margin-top:25px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
<div class="bottom"></div>
</div>
</body>
</html>
Clear float
- Include float
- Avoid text wrapping
Include float
We talked about the collapse of the parent element earlier. When the child element is set to float, the height of the parent element is not set or is smaller than one of the child elements, it will lead to this problem. For example, the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
background-color:yellowgreen;
width:200px;
height:60px;
}
.son1{
background-color:yellow;
width:60px;
height:80px;
float:left;
}
.son2{
background-color:bisque;
width:60px;
height:80px;
float:right;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
The solution is to add the overflow:hidden attribute to the parent element to make it become a BFC, so that the floating element will also be calculated when calculating the height.
Solve text wrapping problem
Generally, when we set floating, we often have the following text wrapping problems:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
background-color:yellowgreen;
width:200px;
overflow: hidden;
}
.son{
background-color:yellow;
width:60px;
height:80px;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
A formatting context is a rendered area of a page that determines how its internal elements will be positioned and how they relate to other elements. That is, there is a set of its own rendering rules.
</div>
</body>
</html>
The solution is to turn the content part into a BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
background-color:yellowgreen;
width:200px;
overflow: hidden;
}
.son{
background-color:yellow;
width:60px;
height:80px;
float:left;
}
.content{
background-color:burlywood;
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="content">
A formatting context is a rendered area of a page that determines how its internal elements will be positioned and how they relate to other elements. That is, there is a set of its own rendering rules.
</div>
</div>
</body>
</html>
Adaptive two column layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left{
background-color:yellow;
width:80px;
height:120px;
float:left;
}
.right{
background-color:burlywood;
height:120px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
