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
Detailed steps for building a React application with a Rails API
Table of contents Backend: Rails API part Front-e...
Detailed explanation of non-parent-child component value transfer in Vue3
Table of contents App.vue sub1.vue sub2.vue Summa...
How to deploy Redis 6.x cluster through Docker
System environment: Redis version: 6.0.8 Docker v...
MySQL database master-slave configuration tutorial under Windows
The detailed process of configuring the MySQL dat...
UDP connection object principle analysis and usage examples
I wrote a simple UDP server and client example be...
View the frequently used SQL statements in MySQL (detailed explanation)
#mysql -uroot -p Enter password mysql> show fu...
How to connect to a remote server and transfer files via a jump server in Linux
Recently, I encountered many problems when deploy...
html opens a new window with a hyperlink and can control window properties
1. The window size opened by the HTML hyperlink C...
How to use regular expressions to automatically match wildcard domain names in nginx
Nginx uses regular expressions to automatically m...
A brief discussion on the VUE uni-app life cycle
Table of contents 1. Application Lifecycle 2. Pag...
Solution to input cursor misalignment in Chrome, Firefox, and IE
Detailed explanation of the misplacement of the in...
Summary of Linux commands commonly used in work
Use more open source tools such as docker and kub...
MySQL Workbench download and use tutorial detailed explanation
1. Download MySQL Workbench Workbench is a graphi...
MySQL 5.7.18 free installation version configuration tutorial
MySQL 5.7.18 free installation version installati...
MySQL index pushdown details
Table of contents 1. Leftmost prefix principle 2....