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

The method of obtaining the resolution of display by pyqt5

The code is as follows import sys from PyQt5.QtWidgets import QApplication, QWidget class Example(QWidget): def __init__(self): super().__init__() self.initUI() #Interface drawing to initui method def initUI(self): self.desktop = QApplication.desktop() #Get display resolution size self.screenRect = self.desktop.screenGeometry() self.height = self.screenRect.height() self.width = self.screenRect.width() print(self.height) print(self.width) #Show window self.show() if __name__ == ‘__main__’: #Create applications and objects app […]