In-depth analysis of float_html/css_WEB-ITnose

What is float?

Float is floating. Its function in HTML is to take an element out of the normal document flow and move it to the "leftmost" or "rightmost" of its parent element. The following explains the concepts of several nouns in this definition:

Document flow: In HTML, document flow is the order in which elements are arranged from top to bottom. Out of document flow: Elements are pulled out of their normal order. Leftmost/rightmost: The above-mentioned moving to the leftmost and rightmost of the parent element means that the element moves to the left or right until it hits another floating element or the boundary of the parent element's content area (excluding padding). The impact of float on its parent element

For its parent element, after the element floats, it breaks away from the normal document flow, so it cannot prop up its parent element, causing the parent element to collapse. The effect is as shown in the figure below Show.

　

 1 //CSS 2 #wrapper { 3     padding: 20px; 4     border: 1px solid red; 5     width: 350px; 6 } 7 .floatL { 8     width: 100px; 9     height: 100px;10     border: 1px solid #000;11     float: left;12 }13 .floatR {14     width: 100px;15     height: 100px;16     border: 1px solid #000;17     float: right;18 }19 .blue {background: #6AA;}20 .red {background: #A66;}

1 //html 2 <div id="wrapper"> <div class="floatL blue">AAAAAAAA</div> </div>

The effect on its sibling elements (non-floating)

If the sibling element is Block-level element, this element will ignore the floating element and occupy its position, and the element will be below the floating element (and their stacking position cannot be changed through the z-index attribute), but its internal text and other inline elements will surround floated elements. It should be noted that the performance is different under IE 6 and 7. In IE 6 and 7, if a non-floating element triggers its own hasLayout, the element will follow the right side of the floating element. And there is a 3px gap between the two in IE6. This is the famous "IE 3px bug"

1 //CSS，其他的样式按照上面给出的，此处就不再重复了2 .block {3     width: 200px;4     height: 150px;5     border: 1px solid #000;6     background: #CCC;7 }

1 <div id="wrapper">2     <div class="floatL blue">AAAAAAAA</div>3     <div class="block">BBBBBBBBB</div>4 </div>

Modern browsers:

IE 6:

IE 7:

If the sibling element is an inline element

, the element will be arranged around the floating element .

1 <div id="wrapper">2     <div class="floatL blue">AAAAAAAA</div>3     文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字4 </div>

1 <div id="wrapper">2     <div class="floatL blue">AAAAAAAA</div>3     <img  src="/static/imghwm/default1.png"  data-src="XXX.png"  class="lazy" alt="In-depth analysis of float_html/css_WEB-ITnose" >4 </div>

Effect on its sibling elements (floats)

Floats in the same direction Element:

When a floating element encounters floating elements in the same direction during floating, it will follow them closely. It can be described with such a vivid metaphor: In a ticket purchase center , if someone runs from one ticket queue to the next ticket queue, then the person who runs first will naturally occupy the front position first. But this ticket purchase queue is still located in the current ticket purchase center, so this floating queue and the normal document flow queue are still in the same parent element.

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3     <div class="floatL blue">BBBBBBBBBB</div>4 </div>

Floating elements in the opposite direction:

As mentioned in the metaphor above, we can assume that the left and right sides of the ticket purchase center Each has a ticket purchase point (as shown in the picture, here we regard a div as a ticket purchaser). The queue floating to the left can be regarded as the ticket purchase queue of the left ticket purchase point, and the float in the opposite direction (that is, the right float) is There is a ticket queue at the ticket purchase point on the right, so when the ticket purchase center is wide enough, the people in the two queues will not be affected by each other. So they are on the same level.

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3     <div class="floatR blue">BBBBBBBBBB</div>4 </div>

But when the ticket purchase center is too narrow or the ticket purchase queues on the left and right are too long, one of the queues will be arranged in another line (here is B Queue, someone may ask why queue A is not on a new line? From the HTML structure below, it can be seen that this is because queue A is established earlier than queue B. According to the principle of first come, first served, the purchase of queue B is Voters will naturally have to start a new line when there are not enough seats).

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3     <div class="floatL red">AAAAAAAA</div>4     <div class="floatR blue">BBBBBBBBBB</div>5     <div class="floatR blue">BBBBBBBBBB</div>6 </div>

When there is no room for even one ticket buyer in the same line, the two queues will be staggered by two lines

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3     <div class="floatL red">AAAAAAAA</div>4     <div class="floatL red">AAAAAAAA</div>5     <div class="floatR blue">BBBBBBBBBB</div>6     <div class="floatR blue">BBBBBBBBBB</div>7 </div>

The effect of float on its own elements

The float object will be regarded as a block object (block-level), that is, the display attribute is equal to block.

The effect of float on child elements

We know that when an element floats, it cannot expand its parent element without clear floating, but it can make its own floating child elements expand itself. And without defining a specific width, change its own width from 100% to adaptive (floating element display: block). Its height and width are the maximum value between the height of the floating element and the height of the non-floating element.

1 //这里我们去掉#wrapper的固定宽度,并在其外部增加一个固定宽度的div,以便更好地展示2 <div class="container">3     <div id="wrapper">4         <div class="floatL red">AAAAAAAA</div>5         <div class="floatL red">AAAAAAAA</div>6     </div>7 </div>

1 <div class="container">2     <div id="wrapper"   style="max-width:90%">3         <div class="floatL red">AAAAAAAA</div>4         <div class="floatL red">AAAAAAAA</div>5     </div>6 </div>

1 .block {2     width: 250px;3     height: 50px;4     border: 1px solid #000;5     background: #CCC;6 }

1 <div class="container">2     <div id="wrapper" style="float:left;">3         <div class="floatL red">AAAAAAAA</div>4         <div class="floatL red">AAAAAAAA</div>5         <div class="block"></div>6     </div>7 </div>

1 .block {2     width: 150px;3     height: 150px;4     border: 1px solid #000;5     background: #CCC;6 }

The effect of float on elements outside the parent

Non-floated elements outside the parent

From As can be seen from the above, when an element floats, it cannot expand its parent element without clear floating, that is, the width and height of the parent element are both 0. And non-floating elements other than its parent element will also ignore the floating element, and the floating element seems to be in another world.

1 //CSS2 .outer {3     height:150px;4     width: 350px;5     border:1px solid blue;6 }

1 //HTML2 <div id="wrapper">3     <div class="floatL red">AAAAAAAA</div>4 </div>5 <div class="outer"></div>

Floated element outside the parent element

When the floated element is within the parent element When the outer elements are floating elements, they seem to be in the same world.
When the floating directions of two elements are the same:

1 <div id="wrapper">2     <div class="floatL red">AAAAAAAA</div>3 </div>4 <div class="outer" style="float:left;"></div>

两个元素的浮动方向相反时：

1 //CSS,这里我们在他们外面增加一个固定宽高的div以便展示，否则右浮动的元素会浮动到body的右边界2 .container {3     width:650px;4     height: 250px;5     border: 1px solid #000;6 }

1 <div class="container">2     <div id="wrapper">3         <div class="floatL red">AAAAAAAA</div>4     </div>5     <div class="outer" style="float:right;"></div>6 </div>

1 <div class="container">2     <div id="wrapper">3         <div class="floatL red">AAAAAAAA</div>4         <div class="floatL red">AAAAAAAA</div>5         <div class="floatL red">AAAAAAAA</div>6         <div class="floatL red">AAAAAAAA</div>7     </div>8     <div class="outer" style="float:right;"></div>9 </div>