Floating and clearing floating in the summary page

Author：Eve Cole Update Time：2025-03-13 12:32:01

1. FLOAT: The main purpose is to achieve the effect of texting pictures.

It has also become the simplest way to create a multi -column layout.

 <IMG SRC = /> <p> Text content paragraph content text content content content content text content content content text content content content content content content paragraph content < /p>

[1] Text winding pictures

 P {margin: 0; border: solid 1px;} img {float: left;}

【2】 Create a multi -column layout

 P {margin: 0; border: solid 1px; width: 200px; float: left;} img {float: left;}

Second, the floating element is out of the document flow, and the parent element cannot see him, because it will not be surrounded by him, and the sub -element will be high, and the parent element will not be supported. At this time, it is not that we want it.

There are three methods below to solve it . Please apply it reasonably during the trial:

 <section> <IMG SRC =/> <p> This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is the bottom. This is the bottom. This is the bottom. This is the bottom. This is the bottom. </Footer>

 Section, FOOTER {border: solid 1px;} img {float: left;}

[1] Add overflow to parent elements: hidden; forced parent element surrounds floating elements

The real use of this statement is to prevent the parent elements from being opened by large content. After using Overflow: Hidden, the parent element still maintains the width of its setting.

In addition, Overflow: Hidden also has another role, that is, it can reliably force the parent element to include its floating sub -element.

You cannot use the top elements of the drop -down menu, otherwise the drop -down menu as its sub -element will not be displayed.

[2] At the same time, the parent element is floating, the width of 100%is the same width as the browser width, setting the floating float for the FOOTER setting, so that the foos will not be squeezed next to the section

 Section {border: solid 1px; float: left; width: 100%} fotern {border: solid 1px; clear: left} img {float: left;}

It cannot be used by automatic outer elements at the outer distance. Otherwise, no longer.

[3] Add non -floating removal elements (pseudo elements)

 .Clearfix: After {Content:; Display: Block; Height: 0 Visibility: Hidden; Clear: Both}

3. When there is no parent element, how to remove it (IMG P as a group, no parent element)

 <section> <IMG SRC = /> <p Class = Clearfix> Text content paragraph content content content content content text content content text content content content content content content paragraph content paragraph content < /p> <IMG src = /> <p class = clearfix > Text content paragraph content text content paragraph content content content content content content text content content content content text content content content paragraph content < /p> <IMG src = /> <p class = clearfix> Text content paragraph content content content content content content content content content text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Content paragraph content text content paragraph content </p> </section>

 .Clearfix: After {Content:; Display: Block; Height: 0 Visibility: Hidden; Clear: Both}

The above is all the contents of this article. I hope that the content of this article will help everyone's learning or work. At the same time, I also hope that more support VEVB Wulin.com!