CSS float floating property

高洛峰

Release： 2017-02-10 15:35:24

Original

2153 people have browsed it

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

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

CSS float 浮动属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>2.3-float属性</title>
    <style type="text/css">
        #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></head><body><p id=a >p-a</p><p id=b>p-b</p><p id=c>p-c</p><input type="text" value="input1"  /><input type="text" value="input2" /><input type="text" value="input3 " /><p id=d>p-d</p><input type="text" value="input4 " /></body></html>

Copy after login

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"

　　 CSS float 浮动属性

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

　　 CSS float 浮动属性

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"

　　 CSS float 浮动属性

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

　 CSS float 浮动属性

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.
Block-level Element (b)	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.
Block-level elements (b)	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:

CSS float 浮动属性

##4.1 float:left

　Add float to these three ps:left

4.1.1 View

　①The width of the browser is "long enough"

CSS float 浮动属性

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

CSS float 浮动属性

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"

CSS float 浮动属性

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

CSS float 浮动属性

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"

CSS float 浮动属性

　　②When the browser width is reduced

CSS float 浮动属性

　　③When the browser width is further reduced

CSS float 浮动属性

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

CSS float 浮动属性　


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.
block Level element (b)	b will fill the space left by a.
Block-level elements (b)	b will not follow the movement of a.
Block-level elements (b)	b will fill the space left by a.