This article is to read some summary and some extension usage after reading the float video of Zhang Xin Asahi great god Mu class net. The first reading of the video is very dull, read carefully will find more boring ... But after encountering the pit to read, will find the conscience video, Abas. Gossip not much to say, start now:
1.The origin of float
The initial design of the float is used to make the wrapping effect of the text, which is what the designer wants us to do.
2.parameters of float
The value of the float property has three parameters:
Left: Indicates that the element floats on the ieft.
Right: Indicates that the element floats on the left.
None: Objects do not float and follow the standard document flow.
3. Effect Display (take float:left as an example, the situation of float:right is only different from the position)
<style> p {
height: 20px;}
.d1 {
width: 50px;
background: hsl (100,50%, 80%);
}
.d2 {float: left;
width: 100px;
background: hsl (150,50%, 80%);
}
.d3 {
width: 250px;
height: 100px;
background: hsl (10,50%, 80%);
}
.d4 {float: left;
width: 300px;
background: hsl (250,50%, 80%);
}
span {
margin-right: 3px;
border-right: solid 1px #ccc;
background-color: hsl (60,50%, 80%);
}
.s3 {
float: left;
} </ style> <body> <p class = "d1"> p1 </ p> <p class = "d2"> p2 has float </ p> <p class = "d3"> p3 </ p> < span class = "s1"> span1 </ span> <span class = "s2"> span2 </ span> <span class = "s3"> span3 has float </ span> <p class = "d4"> p4 has float </ p> <span class = "s4"> span4 </ span> </ body>
When the browser width is not long enough:
When the browser width is long enough:
We can draw the following conclusions:
When the floating element is a block element, when its next immediate element (not floating) is a block element, it will overlap with the floating element, and the floating element will be above. If the next immediate element is an inline element, it will follow the floating element.
When the floating element is an inline element, its next immediate element (not floating) will not move when it is a block element, but it will also overlap when the width is not enough. If the next immediate element is an inline element, it will follow the floating element.
4. Floating destructive
Float-set elements will break away from the document flow, causing their parent elements to appear "collapsed" in height.
<p style = "border: 3px dashed #ddd">
<p> I have not set the float property </ p> </ p>
<p style = "border: 3px dashed #ddd">
<p style = "float: left"> I set the float attribute </ p> </ p>
5. Floating parcel
This is p without float
This is a p with float
6. Floating to space
This has been shown in the above code and conclusion. In short, there is a gap between the two inline elements and the top and bottom of the normal document flow by default. Floating can clear this gap and allow the two elements to seamlessly combine , Will also clear the gap between the top and bottom.
7. Remove floating effects
7.1 Use the clear attribute
A. Putting <p style = "clear: both;"> </ p> as the last child tag and putting it in the parent tag is also the easiest way to clear the float, but it is not recommended.
<p style = "border: 3px dashed #ddd">
<p style = "float: left"> I set the float attribute </ p>
<p style = "clear: both"> </ p> </ p>
B.after pseudo-element and zoom
After refers to after the last child element of the label. So we can use CSS code to generate an element with clear attribute
<style> .myp {
border: 3px dashed #ddd}
.myp: after {
content: "";
clear: both;
display: block;
} </ style> <body> <p class = "myp">
<p style = "float: left"> I set the float attribute </ p> </ p> </ body>
But ie6 / 7 cannot recognize the pseudo element after, you have to use the zoom method, for example:
.myp {
border: 3px dashed #ddd;
Zoom: 1
}
7.2
Add float to the parent element, or attributes such as overflow: hidden, position: absolute, etc. that can make the element BFC. The following section discusses the generation conditions and layout rules of BFC separately, for example:
<style>
.myp {
border: 3px dashed #ddd;
overflow: hidden;
} </ style> <body> <p class = "myp">
<p style = "float: left"> I set the float attribute </ p> </ p> </ body>
About the layout of the float and the effect of clearing, this is the first one. Any omissions and errors are welcome to correct. In the next section, let ’s take a look at what the BFC is, how it is laid out, and why it can be used to clear the float.
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
