A complete guide to clearing floats in CSS (summary)
|
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: Only IE8 and above and non-IE browsers support :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, less likely to have strange problems (currently: used by large websites, such as Tencent, NetEase, Sina, etc.) Disadvantages: There are too many codes, and many beginners do not understand the principle. Two codes must be used together to make mainstream browsers support it. Recommendation: It is recommended to define common classes to reduce CSS code. Rating: ★★★★☆ 2. Add an empty div tag 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>
<div class="div2">
div2
</div>
Principle: Add an empty div, use the clear:both method in CSS to clear the float, so that the parent div can automatically get the height Advantages: simple, less code, good browser support, less likely to have strange problems Disadvantages: Many beginners do not understand the principle; if there are many floating layouts on the page, a lot of empty divs will be added, which makes people feel uncomfortable Recommendation: Not recommended, but this method was previously used as a method to clear floats Rating: ★★★☆☆ 3. 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: Manually defining the height of the parent div solves the problem that the parent div cannot automatically obtain the height Advantages: simple, less code, easy to master Disadvantages: Only suitable for layouts with fixed heights. You need to give an exact height. If the height is different from the parent div, problems will occur. Recommendation: Not recommended, only recommended for layouts with fixed height Rating: ★★☆☆☆ 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: You must define width or zoom:1, and you cannot define height. When using overflow:hidden, the browser will automatically check the height of the floating area. Advantages: simple, less code, good browser support Disadvantages: cannot be used with position, because the size exceeding the limit will be hidden. Recommendation: This is only recommended for those who have not used position or have a deep understanding of overflow:hidden. Rating: ★★★☆☆ 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: You must define width or zoom:1, and you cannot define height. When using overflow:auto, the browser will automatically check the height of the floating area. Advantages: simple, less code, good browser support Disadvantage: When the internal width and height exceed the parent div, a scroll bar will appear. Recommendation: Not recommended. Use this method only if you need scroll bars to appear or if you want to ensure that your code will not cause scroll bars to appear. Rating: ★★☆☆☆ 6. The 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: All codes float together and become a whole Advantages: No advantages Disadvantages: New floating problems will arise. Recommendation: Not recommended, just for understanding. Rating: ★☆☆☆☆ 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 a table Advantages: No advantages Disadvantages: New unknown problems will arise Recommendation: Not recommended, just for understanding Rating: ★☆☆☆☆ 8. Add br tag 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>
Principle: The parent div defines zoom:1 to solve the IE floating problem, and adds a br tag clear:both at the end Recommendation: Not recommended, just for understanding Rating: ★☆☆☆☆ The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Implementation of mysql data type conversion
>>: W3C Tutorial (9): W3C XPath Activities
Recommend
Solve the problem of being unable to log in when installing MySQL on mac using homebrew
If your computer is a Mac, using homebrew to inst...
Introduction to the use and disabling of transparent huge pages in Linux
introduction As computing needs continue to grow,...
Detailed explanation of deploying MySQL using Docker (data persistence)
This article briefly describes how to use Docker ...
Use JavaScript to create page effects
11. Use JavaScript to create page effects 11.1 DO...
Small program to implement a simple calculator
This article example shares the specific code of ...
A few experiences in self-cultivation of artists
As the company's influence grows and its prod...
HTML checkbox Click the description text to select/uncheck the state
In web development, since the checkbox is small an...
Detailed explanation of using echarts map in angular
Table of contents Initialization of echart app-ba...
JS gets the position of the nth occurrence of a specified string in a string
Learn about similar methods for getting character...
MySQL 8.0.19 Installation Tutorial
Download the installation package from the offici...
In-depth understanding of this in JavaScript
In-depth understanding of this in Js JavaScript s...
Solve the problem that shutting down Tomcat using shutdown.bat will shut down other Tomcats
The shutdown.bat file has a sentence if not "...
How does Vue implement communication between components?
Table of contents 1. Communication between father...
Solution to MySQL unable to read table error (MySQL 1018 error)
1. Error reproduction I can access the MySQL data...
Characteristics of JavaScript arrow functions and differences from ordinary functions
Table of contents 1. Use of arrow functions 1. Fr...