Shulou(Shulou.com)06/03 Report--

Editor to share with you what are the characteristics of css floating, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Block elements are arranged vertically by default in the document stream, so multiple div are arranged in turn from top to bottom

If you want the block elements to be arranged horizontally on the page, you can use float to float the elements away from the document flow, and the elements below it will move up immediately after they leave the document flow.

Characteristics of css floats

1. The floating element does not cover the text, and the text automatically surrounds the floating element

two。 After the element floats, it floats to the upper left or right of the page as much as possible until it encounters the border of the parent element or other floating elements.

3. If the floating element is on top of a block element that does not float, the floating element does not exceed the block element

4. The floating element will never exceed the brother element above, squeezing on one side at most

5. After the block element is separated from the document stream, the default height and width are lost. The width will be supported by the content (no longer the default 100% of the parent element) (this is a feature away from the document stream, not just floating).

6. When an inline element leaves the document stream, it becomes a block element (all elements once out of the document stream. All will become block elements)

Body {color:#FFFFFF;} .box1 {width: 400pxposition height: 100px box1 box2 left float: left;} .box2 {width: 400pxscape height: 100pxposition box3 float: left;} .box3 {width: 100pxscape height: 100pxscape height: 100px float: box2 left float box3 float right (why not to the upper right corner?) Web front-end development learning Q-q-u-n: 784783012, sharing learning methods and small details that need to be paid attention to, constantly updating the latest tutorials and learning methods (detailed front-end project practical teaching videos, PDF) the impact of floating and clearing floating

In the document flow, the height of the parent element is supported by the child element by default, that is, the height of the child element is as high as the parent element.

But after the child element floats, the child element cannot support the height of the parent element because it is separated from the document stream. Causes the parent element to disappear highly. The following elements will move up. Eventually lead to confusion in the layout of the page.

Clear floating method 1 (for parent and child elements):

Specify a highly direct write to the parent element (not recommended)

Clear floating method 2 (for parent and child elements):

Turn on BFC for the parent element.

Clear floating method 3: clear floating clear (for sibling elements)

Clear can be used to clear the influence of other floating elements on the current element, just to clear the influence after the float. The element returns to where it was before the other elements floated

If the previous element is a left float: clear:left

If the preceding element floats to the right: clear:right

| | value | description |

| left | floating elements are not allowed on the left side. | |

| right | floating elements are not allowed on the right side. | |

| both | floating elements are not allowed on the left and right sides. (clear the element float that has the greatest impact on the element) |

| none | default value. Allow floating elements to appear on both sides. | |

| inherit | specifies that the value of the clear attribute should be inherited from the parent element. | |

Clearing floats causes high collapse problems (parent and child elements):

You can add a blank div directly at the end of the highly collapsed parent element and set the clear

But this method adds redundant code. So you can use css to add pseudo elements:

. Parent element: after {content: "; display:block;clear:both;} these are all the contents of this article entitled" what are the floating features of css? "Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.