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

Editor to share with you what to do when setting element floats in the HTML document stream leads to a high degree of self-adaptation of the parent element. I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

Element floating definition

The float attribute defines in which direction the element floats. In the past, this attribute was always applied to the image, keeping the text around the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of what element it is.

If floating non-replacement elements, specify an explicit width; otherwise, they will be as narrow as possible.

Note: if there is very little space on a line to float an element, the element jumps to the next line, and the process continues until a line has enough space.

Does the floating of why child elements cause the parent elements to collapse highly?

This is because after the internal element sets float:left | | right, the clear:both and display:block (skeptical) styles are lost, so the external parent container will not be opened.

For example:

The child element is not set to float, and the parent element is automatically stretched out.

.father {

Width: 400px

Border: 1px solid blue

}

.son {

Width: 200px

Height: 200px

Border: 1px solid red

Background-color: yellow

}

The child element is set to float, and the parent element is highly collapsed

.father {

Width: 400px

Border: 1px solid blue

}

.son {

Width: 200px

Height: 200px

Border: 1px solid red

Background-color: yellow

Float: left

}

Common solutions for closing and floating

In the end, the effect we want is to make the parent element highly adaptive as it was before the float was set:

Add a child element that clears the float after the floating element:

.father {

Width: 400px

Border: 1px solid blue

}

.son {

Width: 200px

Height: 200px

Border: 1px solid red

Background-color: yellow

Float: left

}

.clearFloat {

Width: 100%

Height: 0

Clear: both

}

Parent element sets overflow: hidden

.father {

Width: 400px

Border: 1px solid blue

Overflow: hidden

}

.son {

Width: 200px

Height: 200px

Border: 1px solid red

Background-color: yellow

Float: left

}

Isn't it amazing! Because the floating of the child element will cause the parent element to mistakenly think that the content height is 0 (that is, the blue border is a line), so if the parent element is set to overflow:hidden overflow hiding, the child element should not be displayed intuitively due to the overflow. But the real effect is: when the parent element is set to overflow:hidden overflow hiding, the parent element is highly adaptive! What's going on? Because BFC (Block Formatting Context), interested in children's shoes, click the link to learn about it.

With: after pseudo element, the idea is to insert a hidden text "." after the div with: after element, and the hidden text uses clear to achieve a closed float.

.father: after {

Clear: both

Content: "."; / / any text such as "dfgdfg"

Display: block

Height: 0; / / height is 0 and hidden lets the text be completely hidden

Visibility: hidden

}

These are all the contents of the article "what to do when setting the element float in the HTML document flow makes the parent element highly unadaptable?" 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.