For the use of Div and CSS, I think it is more proficient. But for some conceptual things, know very little, for example, today to see a BFC concept, do not know what CSS BFC meaning. The concept is known only after the information has been consulted. In fact, although we do not know what BFC mean, because in the project, no one will say what BFC. But we often use BFC in the project, and each CSS layout will be used basically. In order to eliminate this blind spot, say today what is BFC Bar.
The concept of BFC is BFC the formatting context of "block-level format" and "block-level format scope". It is a concept in the 2.1 specification of the consortium, which determines how an element locates its content and its relationships and interactions with other elements. Colloquially speaking, is a div inside, we use float and margin layout element. BFC layout caused problems about BFC layout caused by the problem, I previously in the CSS common effect Summary of the 10th article on the use of CSS pseudo class processing methods. Today I will speak specifically. First of all, let's look at the problems caused by BFC layout. For example, the following code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
<style type="text/css">
.container{
margin: 30px auto;
width:600px;
height: 300px;
}
.p{
border:solid 3px #a33;
}
.c{
width: 100px;
height: 100px;
background-color: #060;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
</div>
</body>
</html>
The effect we want to see is:
The results appear as follows:
Solution
There are generally 2 ways to solve the problem.
Clear the float with the Clean property
Make the parent container form BFC
To clear the floating method, we can use the following methods:
Add a class to the parent element
<div class="p floatfix">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
</div>
Add the following CSS
.floatfix{
*zoom:1;
}
.floatfix:after{
content:"";
display:table;
clear:both;
}
This method is a better solution!
Another solution is to let the parent element become BFC, this method has a small disadvantage, that is, the parent element has also become floating, do not recommend this method!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
