Several common ways to remove floating

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 is somewhat similar, zoom (IE to attribute) can solve the ie6, IE7 floating problem
Advantages: good browser support, not easy to cause strange problems (currently: large websites are used, such as: Tengxun, Netease, Sina and so on)
Disadvantages: Code, many beginners do not understand the principle, two lines of code to use in combination to allow mainstream browsers to support
Recommendation: recommended use, it is recommended to define public classes to reduce CSS code.
Score:

2、Add an empty div tag at the end of the clear:both.

<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>

Copy code ></span></div>
</div>
<ul>
<li>Principle: Add an empty div and use the clear: body enhanced by CSS to clear the float so that the parent div can automatically get to the height</li>
<li>Advantages: simple, less code, browser support, no easy problems.</li>
<li>Disadvantage: Many beginners do not understand the principle; if the page floating layout, it will add a lot of empty div, people feel very uncomfortable</li>
<li>Recommendation: it is not recommended, but this method is a main way to remove floating.</li>
<li>Score:</li>
</ul>
<h3>3、Parent div defines height</h3>
<div class=

Copy code ></span></div>
<pre><style type=

Copy code ></span></div>
</div>
<ul>
<li>Principle: parent div manually defines height, which solves the problem that parent div can not automatically get height.</li>
<li>Advantages: simple, few code, easy to master.</li>
<li>Disadvantage: Only suitable for High-fixed layout, to give the exact height, if the height is not the same as the parent div, will cause problems</li>
<li>Recommendation: it is not recommended, but only when highly fixed layout is recommended.</li>
<li>Score:</li>
</ul>
<h3>4、Parent div defines overflow:hidden</h3>
<div class=

Copy code ></span></div>
</div>
<ul>
<li>Principle: You must define width or zoom: 1, and you cannot define height. When you use overflow: hidden, the browser automatically checks the height of the floating area</li>
<li>Advantages: simple, less code, browser support.</li>
<li>Disadvantages: can not be used with position, because the extra size will be hidden.</li>
<li>Recommendation: only recommend using position or a friend who understands overflow:hidden better.</li>
<li>Score:</li>
</ul>
<h3>5、Parent div defines overflow:auto</h3>
<div class=

Copy code ></span></div>
</div>
<ul>
<li>Principle: You must define width or zoom: 1, and you cannot define height. When you use overflow: auto, the browser automatically checks the height of the floating area</li>
<li>Advantages: simple, less code, browser support.</li>
<li>Disadvantages: when the internal width is higher than the parent div, there will be scrollbars.</li>
<li>Suggestion: Not recommended, if you need a scrollbar or make sure your code doesn’t show a scrollbar.</li>
<li>Score:</li>
</ul>
<h3>6、The parent div also floats together.</h3>
<div class=

Copy code ></span></div>
</div>
<ul>
<li>Principle: all code floating together becomes a whole.</li>
<li>Advantages: no merit</li>
<li>Disadvantages: new floating problems will arise.</li>
<li>Recommendation: not recommended for use only for understanding.</li>
<li>Score:</li>
</ul>
<h3>7、Parent div defines display:table</h3>
<div class=

Copy code ></span></div>
</div>
<ul>
<li>Principle: turn div attribute into form.</li>
<li>Advantages: no merit</li>
<li>Disadvantages: new unknown problems will arise.</li>
<li>Recommendation: not recommended for use only for understanding</li>
<li>Score:</li>
</ul>
<h3>8、Br tag clear:both at the end.</h3>
<div class=

Copy code ></span></div>
</div>
<ul>
<li>Principle: the parent div defines zoom:1 to solve the IE floating problem and the br tag clear:both at the end.</li>
<li>Recommendation: not recommended for use only for understanding</li>
<li>Score:</li>
</ul>
</div>
</div><!-- .entry-content -->

<footer class=

waliwali2018-12-222018-12-22default

Leave a Reply Cancel reply