How to clear floats using CSS

This article mainly introduces how to use CSS to clear floating methods. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Display effects in various browsers It may also be different, which makes clearing floats more difficult. Here are 8 ways to clear floats. The test has passed ie chrome firefox opera. Friends in need can refer to the following

Clearing floats is the design of every web front desk A function that a teacher must master. css clear float encyclopedia, a total of 8 methods.
Floating will cause the current label to float upward, and will also affect the position of the front and rear labels, the parent label, and the width height attribute. Moreover, the same code may display differently in various browsers, which makes clearing floats more difficult. There are several ways to solve problems caused by floats, but some have issues with browser compatibility.
The following summarizes 8 methods of clearing floats (the test has passed ie chrome firefox opera, the next three methods are just for understanding):
1, the parent p defines height

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle : The parent p manually defines the height, which solves the problem that the parent p cannot automatically obtain the height.
Advantages: simple, less code, easy to master
Disadvantages: only suitable for fixed-height layouts, the precise height must be given, if the height is different from the parent p, problems will occur
Suggestion: No It is recommended to use
2 only for fixed-height layouts, and add an empty p tag clear:both at the end

<style type="text/css"> 
.p1{background:#000080;border:1px solid red} 
.p2{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} 
/*清除浮动代码*/ 
.clearfloat{clear:both} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
<p class="clearfloat"></p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: add an empty p, use clear:both improved by css to clear the float, let The parent p can automatically obtain the height
Advantages: simple, less code, good browser support, not prone to strange problems
Disadvantages: many beginners do not understand the principle; if the page has a lot of floating layouts, it must be added There are many empty ps, which makes people feel very bad.
Recommendation: Not recommended, but this method was mainly used in the past to clear floats.
3. The parent p defines pseudo-classes: after and zoom

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;} 
.p2{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} 
/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
</style> 
<p class="p1 clearfloat"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: Only IE8 and above and non-IE browsers support:after. The principle is somewhat similar to method 2. zoom (IE conversion has attributes) can solve the floating problem of ie6 and ie7
Advantages: good browser support, no problem It is prone to strange problems (currently: used by large websites, such as: Tencent, NetEase, Sina, etc.)
Disadvantages: There are many codes, many beginners do not understand the principle, and two lines of code must be used in combination to allow mainstream browsing All devices support it.
Recommendation: It is recommended to use it. It is recommended to define public classes to reduce CSS code.
4, parent p defines overflow:hidden

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: width or zoom:1 must be defined, and height cannot be defined. 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 exceeded size will be hidden.
Recommendation: Only recommended for friends who have not used position or have a deep understanding of overflow:hidden.
5, parent p defines overflow:auto

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: width or zoom:1 must be defined, and height cannot be defined. When using overflow:auto, the browser will automatically check the height of the floating area
Advantages: Simple, less code, good browser support
Disadvantages: When the internal width and height exceed the parent p, scroll bars will appear.
Recommendation: Not recommended, use it if you need scroll bars to appear or to ensure that scroll bars do not appear in your code.
6, the parent p also floats together

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: All codes float together and become a whole
Advantages: No advantages
Disadvantages: New floating problems will occur.
Suggestion: Not recommended for use, only for understanding.
7, the parent p defines display:table

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: Turn the p attribute into a table
Advantages: No advantages
Disadvantages: New unknown problems will arise.
Suggestion: Not recommended for use, only for understanding.
8, add the br tag clear:both at the end

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
<br class="clearfloat" /> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: The parent p defines zoom:1 to solve the IE floating problem, add the br tag clear:both at the end
Suggestion: Not recommended Use for understanding only.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

css Explanation of background:transparent

Explanation of css mouse style cursor

The above is the detailed content of How to clear floats using CSS. For more information, please follow other related articles on the PHP Chinese website!