CSS Clearing Floating Method Daquan (Summary)

Time:2019-8-8

1. 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 and non-IE browsers only support: after, principle and method 2 are a little similar, zoom (IE has attributes) can solve the floating problem of ie6, IE7

Advantages: good browser support, not easy to have strange problems (currently: large websites are used, such as Tengxun, Netease, Sina, etc.)

Disadvantage: There are many codes, many beginners do not understand the principle, it is necessary to use two codes in combination to enable mainstream browsers to support.

Recommendation: Recommended use, recommended definition of common classes to reduce CSS code

Score:

2. Add the empty div tag clear 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>
<div class="div2">
   div2
   </div>

Principle: Adding an empty div, clearing the float by using css-enhanced clear: body, so that the parent div can automatically get the height

Advantages: Simple, less code, good browser support, not easy to have strange problems

Disadvantage: Many beginners do not understand the principle; if the page floating layout is more, we need to add a lot of empty divs, which makes people feel very uncomfortable.

Suggestion: It is not recommended, but this method is one of the main methods used in the past to remove floating.

Score:

3. The parent div defines 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: The parent div manually defines height, which solves the problem that the parent div cannot automatically get height.

Advantages: Simple, less code, easy to master

Disadvantage: Only suitable for highly fixed layout, to give a precise height, if the height and parent div is not the same, there will be problems.

Recommendation: Not recommended, only highly fixed layout is recommended.

Score:

4. The 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, good browser support

Disadvantage: Can’t be used with position, because excess size will be hidden

Suggestion: Recommend only friends who do not use position or who have a better understanding of overflow: hidden.

Score:

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, good browser support

Disadvantage: When the internal width exceeds the parent div, a scroll bar appears.

Suggestion: Not recommended, if you need to scroll or make sure your code does not scroll.

Score:

6. Parent divs also float 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: All code floats together and becomes a whole.

Advantages: No Advantages

Disadvantage: New floating problems will arise.

Suggestion: No recommendation, only understanding.

Score:

7. The 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: Change div attributes into tables

Advantages: No Advantages

Disadvantage: New unknown problems will arise

Suggestion: No recommendation, only understanding

Score:

8. Add the br tag clear 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>

Principle: The parent div defines zoom:1 to solve the IE floating problem, with the br tag clear:both at the end.

Suggestion: No recommendation, only understanding

Score:

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.

Recommended Today

Implementation of PHP Facades

Example <?php class RealRoute{ public function get(){ Echo’Get me’; } } class Facade{ public static $resolvedInstance; public static $app; public static function __callStatic($method,$args){ $instance = static::getFacadeRoot(); if(!$instance){ throw new RuntimeException(‘A facade root has not been set.’); } return $instance->$method(…$args); } // Get the Facade root object public static function getFacadeRoot() { return static::resolveFacadeInstance(static::getFacadeAccessor()); } protected […]