A clear third floating manner
1. There are two partition law as follows: Method interior and exterior wall method.
2. facades law
(1) adding an additional block element between two boxes
(2) to add the additional block element is provided: clear: both; property
Precautions: Exterior law allows second box to use margin-top property
But we can not let the first box to use margin-bottom property
Solution: In order to avoid the above problems, we set the height of the element "wall" where to solve this problem.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D134_ClearFloatThree</title> <style> .box1 { background-color: red; /*border:1px white solid;*/ } .box2{ background-color: green; /*border:1px white solid;*/ } .box1 p{ width:100px; background-color: blue; float:left; } .box2 p { width:100px; background-color: red; float:left; } .wall{ clear:both; height:20px; } </style> </head> <body> <div class="box1"> < The p- > I am writing 1 </ the p- > < The p- > I am writing 2 </ the p- > < The p- > I am writing 3 </ the p- > </div> < Div class = "Wall H20" > </ div > <-! Here also reviewed embodiment a tag may define a plurality of class attributes, the plurality of attributes can be unified set style -> <div class="box2"> < The p- > I am writing 4 </ the p- > < The p- > I am writing 5 </ the p- > < The p- > I am writing 6 </ the p- > </div> </body> </html>
3. interior law
(1) adding an additional block element between two boxes
(2) block-level element is provided to clear the additionally added: both; property
Precautions: Exterior law allows second box to use margin-top property
The first box also allows the use of margin-bottom property
Here we only modify the example above few lines of code
.wall{ clear:both; /*height:20px;*/ } ....... ........ omitted Code <div class="box1"> < The p- > I am writing 1 </ the p- > < The p- > I am writing 2 </ the p- > < The p- > I am writing 3 </ the p- > <div class="wall"></div> </div>
4. The difference between the interior and exterior walls method Method
Method can not hold up the height of the external walls of a box, and the interior height of the first process may hold up a box.
5. Note point: exterior and interior walls are not commonly used methods, facades law tends to decrease legibility, I do not know what to do; the interior design is contrary to our style and content separated from the original intention, it is only for understanding
Third, the source code:
D134_ClearFloatThree.html
D135_ClearFloatInternalWallMethod.html
address:
https://github.com/ruigege66/HTML_learning/blob/master/D134_ClearFloatThree.html
https://github.com/ruigege66/HTML_learning/blob/master/D135_ClearFloatInternalWallMethod.html
2.CSDN: https: //blog.csdn.net/weixin_44630050 (Xi Jun Jun Moods do not know - Rui)
3. Park blog: https: //www.cnblogs.com/ruigege0000/
4. Welcomes the focus on micro-channel public number: Fourier transform, personal account only for technical exchanges, backstage reply "gifts" big data acquisition Java Learning Video Package
