Home > Developer > JavaScript
Our "floating" and "floating"
First-end entry-level shoes must be "float", "Little Devil", and love and hate. So do I. I am a beginner, but every day I am overwhelmed by float.
Enter the subject ~~~~~~~~~
Let me summarize the generation and solution of floating. If there are any mistakes, please give me some advice. My sister is not very grateful.
In css specifications, floating positioning does not belong to normal document streams (normal document streams are the tag elements in html files, such as <div> and <p> ), float is positioned independently and will be removed from normal documents.
It is like a parent container that only contains floating elements. If child elements are not displayed, the parent container does not exist, is the legendary "height collapse"! We hope the results will be shown on the left. However, the world is a process of comparison with love. The result is shown on the right. Hahaha, you have won !!! Then we will summarize the solution to this problem, that is, the so-called "Clear floating.
1. Floating elements are eXtensible
It can be understood that when a parent element is set as a floating element, the parent element is extended and contains all floating elements contained in it. (Not recommended. If the parent element is a floating element, the layout behind it will be affected)
1 <body> 2 <div id="wrap"> 3 <div id="left"> 4 5 </div> 6 <div id="right"> 7 8 </div> 9 </div>10 </body>
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 #wrap{ 6 float: left; 7 margin:80px 80px; 8 padding: 20px; 9 border: 3px double yellow;10 width: 500px;11 background-color: green;12 }13 14 #left{15 float: left;16 border: 3px double yellow;17 width: 200px;18 height: 300px;19 background-color: blue;20 }21 #right{22 float: right;23 border: 3px double yellow;24 width: 200px;25 height: 300px; 26 background-color: blue;27 }
2. add "<div> 1 <body> 2 <div id =" wrap "> 3 <div id =" left "> 4 5 </div> 6 <div id = "right"> 7 8 </div> 9 <! -- <Div> --> 10 </div> 11 </body>
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 #wrap{ 6 margin:80px 80px; 7 padding: 20px; 8 border: 3px double yellow; 9 width: 500px;10 background-color: green;11 }12 13 #left{14 float: left;15 border: 3px double yellow;16 width: 200px;17 height: 300px;18 background-color: blue;19 }20 #right{21 float: right;22 border: 3px double yellow;23 width: 200px;24 height: 300px; 25 background-color: blue;26 }
3. Add "overflow: hidden;" to the parent element containing floating elements. The principle is to trigger BFC.
Popular Science Popularization BFC: block-level format context, which is an isolated and easy form on the page. The child elements in the container do not affect the external elements.
One of the reasons for triggering an element to BFC is that "overflow is not visible". When calculating the BFC height, floating elements are also involved in the calculation.
To solve this problem, when we set the overflow of the parent element div to hidden, the parent element triggers the formation of BFC, so the height will also involve floating elements in the calculation.
<body> <div id="wrap"> <div id="left"> </div> <div id="right"> </div> </div></body>
*{ margin: 0; padding: 0;}#wrap{ overflow: hidden; margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;}#left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}#right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}
4. after pseudo-element: after a sub-element, you can set an element with clear to hide it. (Recommended and proven)
1 <body> 2 <div id="wrap"> 3 <div id="left"> 4 5 </div> 6 <div id="right"> 7 8 </div> 9 10 </div>11 </body>
*{ margin: 0; padding: 0;}#wrap{ margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;}#left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}#right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}#wrap:after{ content: ""; clear: both; visibility: hidden; display: block;}
5. Add the br tag at the end of the floating Element
<body> <div id="wrap"> <div id="left"> </div> <div id="right"> </div> <br class="clearfloat"/> </div></body>
*{ margin: 0; padding: 0;}#wrap{ margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;}#left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}#right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}.clearfloat{ clear: both;}
6. Parent div defines display: table; (new problems will occur)
<body> <div id="wrap"> <div id="left"> </div> <div id="right"> </div> </div></body>
*{ margin: 0; padding: 0;}#wrap{ display: table; margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;}#left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}#right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}
7. Parent div defines overflow: auto; (width or zoom: 1 must be defined, and height cannot be defined)
<body> <div id="wrap"> <div id="left"> </div> <div id="right"> </div> </div></body>
*{ margin: 0; padding: 0;}#wrap{ overflow: auto; margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;}#left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}#right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}
8. Define the height.
<body> <div id="wrap"> <div id="left"> </div> <div id="right"> </div> </div></body>
*{ margin: 0; padding: 0;}#wrap{ height: 352px; margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;}#left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}#right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;}
All the eight methods have been described. The first time I wrote a blog, I was a little shaken. Please forgive me, hahaha.
20:22:53
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
