Detailed explanation of CSS float property

1. What is floating?

Floating, as the name suggests, means floating. Refers to the phenomenon that an element is separated from the document flow and floats above the parent element.

2. How to generate floating?

Add the float attribute to the element itself

float value:

left	Floats the element left.
right	Floats the element to the right.
none	default value. The element does not float and will appear where it appears in the text.
inherit	Specifies that the value of the float property should be inherited from the parent element.

3.What is the function of floating?

Function: In the HTML document flow, it is divided into line elements, block elements and inline block elements.

Row elements and inline block elements are arranged horizontally, while block elements are arranged from top to bottom in a flow. When we want to arrange block elements horizontally, we use float.

When a float is added to a block-level element, the elements that should be arranged vertically begin to be arranged horizontally, as shown in the following figure:

.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
<div class="box"> <div class="box1"> box1 </div> <div class="box2"> box2 </div> <div class="box3"> box3 </div> <div class="box4"> box4 </div> <div class="box5"> box5 </div> </div>

4. Problems caused by floating

When an element is floated, the element is out of the document flow, which will cause a fatal problem: the parent element height collapses (taking the above example as an example):

.box {border: 1px solid #666; width: 800px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
.on { width: 50px; height: 300px; background: pink; }
<div class="box">
        <div class="box1"> box1 </div>
        <div class="box2"> box2 </div>
        <div class="box3"> box3 </div>
        <div class="box4"> box4 </div>
        <div class="box5"> box5 </div>
</div>
<div class="on"> </div>

When I don't add height to the parent element box, the box height is 0, and the box's sibling elements will squeeze upwards; and the floating element will cover the parent sibling element on:

5. How to solve it (advantages and disadvantages)?

(1) Parent div defines height

<style type="text/css">
/*Solution code*/
.div1{background:#000080;border:1px solid red; 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

(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;height:0;overflow:hidden;}
</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 bad

Recommendation: Not recommended, but this method was previously used as a method to clear floats

(3) Parent div defines pseudo objects: 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;overflow:hidden;}
.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 above and non-IE browsers support :after. The principle is similar to method 2. Zoom (IE exclusive property) can solve the floating problem of IE6 and IE7.

Advantages: good browser support, not prone to 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 principles. Two codes must be used in combination to make mainstream browsers support it.

Recommendation: It is recommended to define common classes to reduce CSS code.

(4) The parent div defines overflow:hidden

<style type="text/css">
/*Solution code*/
.div1{background:#000080;border:1px solid red; 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.

(5) Parent div defines overflow:auto

<style type="text/css">
/*Solution code*/
.div1{background:#000080;border:1px solid red; 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.

(6) The parent div also floats together

<style type="text/css">
/*Solution code*/
.div1{background:#000080;border:1px solid red; width:98%;margin-bottom:10px;float:left}
/*Solution code*/
.div2{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>
<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.

(7) Parent div defines display:table

<style type="text/css">
;/*Solution code*/
.div1{background:#000080;border:1px solid redwidth: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

Disadvantage: New unknown problems will arise.

Recommendation: Not recommended, just for understanding.

(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

Summarize

This is the end of this article on the detailed explanation of the CSS float property. For more relevant CSS float content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: HTML exceeds the text line interception implementation principle and code

>>: How to get the intersection/difference/union of two sets in mysql