CSS float floating property

This article mainly introduces the float attribute: defining the direction in which the element floats.

Contents:

1. Page layout method: Introducing document flow, floating layer and float attribute.

2. float:left: Introducing the layout method when float is left.

3. float:right: Introducing the layout method when float is right.

4. Adjacent elements contain float attributes: Introducing the layout method when adjacent elements contain float attributes.

1. Page layout method

Page layout method mainly includes: document flow, floating layer, and float attributes.

1.1 Document flow

The standard document flow (default layout) of an HTML page is: from top to bottom, from left to right, with line breaks when encountering blocks (block-level elements).

1.2 Floating layer

Floating layer: After assigning a value to the float attribute of the element, it is separated from the document flow and floats left and right, close to the parent element (default is body The left and right borders of the text area).

The floating element is filled in by subsequent (non-floating) elements in the vacant position of the document flow: block-level elements are filled directly. If it overlaps with the range of the floating element, the floating element covers the block-level element. element. Inline elements: Insert them if there is any space.

1.3 Introduction to float attribute

　① left: The element floats to the left.

　② right: The element floats to the right.

　③ none: Default value.

　④ inherit: Inherit the float attribute from the parent element.

1.4 Example

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <title>2.3-float属性</title>
    <style>
        #a        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b        {
            background-color:Yellow;    
            height:50px;
            width:200px;
        }
        #c        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d         {
            background-color:Gray;
            height:50px;
            width:400px;
         }

    </style><p>p-a</p><p>p-b</p><p>p-c</p><input><input><input><p>p-d</p><input>

2. float:left

Description: The element floats to the left.

2.1 Code changes

input2 Add: float:left

p-b Add: float:left

p-d Add: float:left

2.2 View after change

　① When the width of the browser is "not long enough"

　　

　② When the width of the browser is "long enough"

　　

2.3 Conclusion

#Current element classification (float:left )Next adjacent element classification (excluding float)Conclusion##Block-level element (a)Inline element (b)Inline elements (a)Inline element (b)

3. float:right

Description: The element floats to the right.

3.1 Code changes

input2 element: add float:right

p-b add: float:right

p-d add: float:right

3.2 View after change

　① When the width of the browser is "not long enough"

　　

　② When the width of the browser is "long enough"

　

3.3 Conclusion

Block-level Element (b)	b will fill the space left by a, a will overlap b, and a’s layer will be on top.
	b will immediately follow a. And according to the characteristics of its own inline elements, whether to wrap.
Block-level elements (b)	b will not follow the movement of a.
	b will immediately follow a. And according to the characteristics of its own inline elements, whether to wrap.

##Current element classification (float: right)Next adjacent element classification (not including float)Conclusion##Block-level element (a)Inline element (b)Inline elements (a)Inline element (b)

4. Adjacent elements contain float attributes

Due to the characteristics of inline elements, it is best not to use float attributes adjacent to inline elements and block-level elements.

The following uses block-level elements as examples:

Default view:

##4.1 float:left

　Add float to these three ps:left

4.1.1 View

　①The width of the browser is "long enough"

　　

　　② The width of the browser is "not long enough"

　　

4.1.2 Conclusion

　Ⅰ Adjacent floating elements, the element with the left attribute in front, are ranked first left.

　Ⅱ After becoming a floating element, it has the "properties" of inline elements in the floating layer. When multiple floating elements cannot fit in one row, they will be wrapped.

4.2 float:right

Add float:right

4.2.1 View

to these three p’s ①Browse The width of the browser is "long enough"

　　

　　②The width of the browser is "not long enough"

　　

4.2.2 Conclusion

　　Ⅰ Adjacent floating elements, the element with the right attribute at the front, is ranked on the far right.

　Ⅱ After becoming a floating element, it has the "properties" of inline elements in the floating layer. When multiple floating elements cannot fit in one row, they will be wrapped.

4.3 Block-level elements with different heights

Set the height value of p-a to be greater than p-b, and add float:left to all three ps:

4.3.1 View

　　①The width of the browser is "long enough"

　　

　　②When the browser width is reduced

　　

　　③When the browser width is further reduced

　　

4.3.2 Conclusion

　　ⅠWhen sorting p floating elements with unequal heights , according to the "characteristics" of inline elements, when multiple floating elements cannot fit in one row, they will wrap.

4.3.3 Solving the browser width reduction deformation

Embed the p element with float attribute in a p, and add width and height attributes to this p. When the browser width is reduced, it will not be deformed.

You can refer to CSS HTML element layout and Display attribute introduction

!

　

block Level element (b)	b will fill the space left by a. If a overlaps b (the width of the parent container is reduced), a's layer will be on top.
	b will fill the space left by a.
Block-level elements (b)	b will not follow the movement of a.
	b will fill the space left by a.