Css clear Floating Method, css clear Floating Method

Css clear Floating Method, css clear Floating Method

1. The parent div defines the height.

 

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */height: 200px ;}. div2 {background: #800080; border: 1px solid red; height: 100px; margin-top: 10px }. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> </div> <div class = "div2"> div2 </div>

 

 

Principle: if the parent div manually defines the height, the parent div cannot automatically obtain the height.

Advantages: simple, less code, easy to master

Disadvantage: It is only suitable for layout with fixed height. It must be accurate. If the height is different from that of the parent div, problems may occur.

Suggestion: it is not recommended. It is only recommended for layout with fixed height.

2. Add the empty div label clear: both at the end.

 

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red }. div2 {background: #800080; border: 1px solid red; height: 100px; margin-top: 10px }. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD}/* clear floating Code */. clearfloat {clear: both} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> <div class = "clearfloat"> </div> <div class = "div2"> div2 </div>

 

 

Principle: add an empty div and clear the floating with clear: both raised by css, so that the parent div can automatically get the height.

Advantages: simple, less code, good browser support, and not prone to strange problems

Disadvantages: Many beginners do not understand the principle. If there are many floating la s on the page, a lot of empty divs will be added, making people feel bad.

Suggestion: it is not recommended, but this method was previously used to clear floating

3. Parent div defines pseudo classes: after and zoom

 

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red ;}. div2 {background: #800080; border: 1px solid red; height: 100px; margin-top: 10px }. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD}/* clear floating Code */. clearfloat: after {display: block; clear: both; content: ""; visibility: hidden; height: 0 }. clearfloat {zoom: 1} </style> <div class = "div1 clearfloat"> <div class = "left"> Left </div> <div class = "right"> Right </div> </div> <div class = "div2"> div2 </div>

 

 

Principle: IE8 or above is supported by non-IE browsers: after. The principle is similar to method 2. zoom (IE conversion has attributes) can solve the floating problem of ie6 and ie7.

Advantages: Good browser support, not prone to strange issues (currently: large websites are used, such as Teng Xun, Netease, Sina, etc)

Disadvantages: There are many codes, and many beginners do not understand the principle. It is necessary to combine two sentences of code to support mainstream browsers.

Suggestion: It is recommended that public classes be defined to reduce CSS code.

4. Parent div defines overflow: hidden

 

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */width: 98%; overflow: hidden }. div2 {background: #800080; border: 1px solid red; height: 100px; margin-top: 10px; width: 98% }. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> </div> <div class = "div2"> div2 </div>

 

 

Principle: width or zoom: 1 must be defined, and height cannot be defined. When overflow: hidden is used, the browser automatically checks the height of the floating area.

Advantages: simple, less code, and good browser support

Disadvantage: it cannot be used with position because the excess size is hidden.

Suggestion: We recommend that you only use position or a friend who has a deep understanding of overflow: hidden.

5. Parent div defines overflow: auto

 

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */width: 98%; overflow: auto }. div2 {background: #800080; border: 1px solid red; height: 100px; margin-top: 10px; width: 98% }. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> </div> <div class = "div2"> div2 </div>

 

 

Principle: width or zoom: 1 must be defined, and height cannot be defined. When overflow: auto is used, the browser automatically checks the height of the floating area.

Advantages: simple, less code, and good browser support

Disadvantage: the scroll bar appears when the internal width and height exceed the parent div.

Suggestion: it is not recommended. If you need a scroll bar or make sure that your code does not appear, use it.

6. Parent div also floats together

 

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */width: 98%; margin-bottom: 10px; float: left }. div2 {background: #800080; border: 1px solid red; height: 100px; width: 98%;/* solution Code */clear: both }. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> </div> <div class = "div2"> div2 </div>

 

 

Principle: When all the code is floating together, it becomes a whole.

Advantage: no advantage

Disadvantage: there will be a new floating problem.

Suggestion: it is not recommended.

7. Parent div defines display: table

 

<Style type = "text/css">. div1 {background: #000080; border: 1px solid red;/* solution Code */width: 98%; display: table; margin-bottom: 10px ;}. div2 {background: #800080; border: 1px solid red; height: 100px; width: 98% ;}. left {float: left; width: 20%; height: 200px; background: # DDD }. right {float: right; width: 30%; height: 80px; background: # DDD} </style> <div class = "div1"> <div class = "left"> Left </div> <div class = "right"> Right </div> </div> <div class = "div2"> div2 </div>

 

 

Principle: Convert div attributes into tables

Advantage: no advantage

Disadvantage: new unknown problems may occur.

Suggestion: it is not recommended.

8. Add the br label clear: both at the end.

 

<style type="text/css"> .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} .div2{background:#800080;border:1px solid red;height:100px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} .clearfloat{clear:both} </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <br class="clearfloat" /> </div> <div class="div2"> div2 </div>