Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge points of floating feature instance analysis in CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Floats have the following characteristics:

Uncovered text

Floating elements are not followed by block-level elements, and subsequent elements will be side by side with it (unless the width of the element is set and the line will wrap when the screen does not fit).

If the last element of a floating element does not float, the float floats only on the current line; when the float encounters a float, they will be sorted on one line unless there is no place

Floats will be ignored when the element is set to absolute or fixed

Float causes the parent element to collapse highly

Floating elements are affected by the margin-top of the latter element

Uncovered text

Body,div {margin:0; padding:0;} div {width:100px; height:100px;} .item1 {float:left; background-color: pink;} .item2 {background-color: # 58d3e2;} item1item2

As you can see, item2's div is invisible except for the text, because it runs under the item1. Why is the text not covered by floating elements? Because the essence of floating is to surround the text.

It can also be seen from the above that the block-level element after the floating element occupies the position of the floating element, and the floating element is always above the standard stream element.

Floating elements are not followed by block-level elements, and subsequent elements will be side by side with it (unless the width of the element is set and there will be no line wrapping when the screen does not fit)

Body,div {margin:0; padding:0;} div {width:100px; height:100px;} .item1 {float:left; background-color: pink;} .item2 {display: inline-block; background-color: # 58d3e2;} item1item2

If the last element of a floating element does not float, the float floats only on the current line; when the float encounters a float, they will be sorted on one line unless there is no place

Body,div {margin:0; padding:0;} div {width:100px; height:100px;} .item1 {background-color: pink;} .item2 {float:left; background-color: # 58d3e2;} item1item2item3

Body,div {margin:0; padding:0;} div {width:400px; height:100px; float: left;} .item1 {background-color: pink;} .item2 {background-color: # 58d3e2 } .item3 {background-color: # 61dafb;} .item4 {background-color: # e9203d;} item1item2item3item4

You can set width as a percentage to achieve adaptation

Div {width:25%; height:100px; float: left;}

Floats will be ignored when the element is set to absolute or fixed

Body,div {margin:0; padding:0;} div {position: absolute; float: left; width:100px; height:100px; border: 1px solid red;} floating encounters positioning

An inline element generates a block box after using a float, so it can use attributes such as width,height,margin,padding

Body,div {margin:0; padding:0;} [class^ = 'item'] {float: left; width:100px; height:100px; line-height: 100px; text-align: center;} .item1 {float: left; background-color: pink } .item2 {display: inline-block; background-color: # 58d3e2;} item1item2

Float causes the parent element to collapse highly

In web design, it is very common to give the content a div as a package container, and this package container does not set the height, but allows the contents to open the height of the package container. If the child element is not floated, there will be no problem, but once the child element is floated, the parent element will not be able to adapt to the height of the floating element, and the height of the parent element will be 0. As a result, the background color can not be displayed. The reason is:

Because the div height is not preset, the div height is determined by the height of the child elements it contains. The float is detached from the document stream, so the child elements are not calculated for height. At this time, the height of the sub-element in the div is equal to 0 in div, so the parent element highly collapses.

Body,div {margin:0; padding:0;} .item {float: left; width:100px; height:100px; background-color: pink;}

Solution.

1. Add "overflow:hidden" to the parent element

Of course, it can also be "overflow:auto". But for compatibility with IE, it is better to use overflow:hidden.

.box {overflow:hidden;}

So why does "overflow:hidden" solve this problem?

Because "overflow:hidden" triggers BFC,BFC, which in turn determines how "height:auto" is calculated.

That is, when calculating the height of the BFC, the floating element also participates in the calculation, so the parent element adapts to the height of the floating element.

So, you can also set "display:inline-block", "position:absolute" and "float:left" to solve the problem of high collapse of the parent element. Because anyone who can create a BFC can achieve the effect of wrapping floating child elements. Therefore, it is said on the Internet that BFC can wrap floating elements.

two。 Add pseudo element + clear float after or before the content of the parent element

You can add a pseudo element to the content of the parent element, you can use:: before or:: after, and then the content is empty so that it does not occupy the position, and finally add "clear:both" to the pseudo element to clear the float.

Body,div {margin:0; padding:0;} .box:: after {content:'; display: block; clear:both;} .item {float:left; width:100px; height: 100px; background-color: deeppink;}

Why is this okay?

To understand the reason, we need to know two points: one is the actual role of pseudo elements, and the other is that the clear of css can only affect the elements themselves, not other elements, and clearing floats can be understood as breaking the horizontal arrangement.

First of all, we need to clear the role of:: after and:: before. Instead of inserting a pseudo element behind or in front of an element, they will insert a pseudo element (in the element) behind or in front of the element content. I always thought that the content inserted by the before and: after pseudo elements would be injected before or after the target element, but the injected content would be a child element of the associated target element. But it will be placed "before" or "after" anything in this element. For example, you can see that the height of the .box is 300px, indicating that two pseudo elements have been inserted into the .box content.

Body,div {margin:0; padding:0;} .box:: before {content: 'before'; height: 100px; width: 100px; display: block; clear:both; background-color: # 61dafb } .box:: after {content: 'after'; width:100px; height:100px; display: block; clear:both; background-color: aquamarine;} .item {float:left; width:100px; height:100px Background-color: deeppink;}

To sum up, we often use the following ways to clear floats

.box:: after {content:''; display:block; clear:both;} or .box:: before {content:''; display:block; clear:both;} or .box:: before,.box::after {content:''; display:block; clear:both;} /:: before and:: after must be used in conjunction with the content attribute, content is used to define the inserted content, and content must have a value, at least empty. By default, the display of pseudo-class elements is the default value of inline, and its display can be changed by setting display:block.

Insert a pseudo element before and after the content of the parent element. Empty content ensures no position (height 0). "clear:both" clears the float around the parent element, causing .box:: before and .box:: after to wrap lines when they encounter a floating element, thus opening the height, and the parent element adapts to this height so that the height does not collapse.

Other solutions to high collapse are based on these two ideas, one is to trigger BFC, and the other is to add elements + clear floats (clear).

Floating elements are affected by the margin-top of the latter element

Body,div {margin:0; padding:0;} div {width:100px; height:100px;} div:nth-of-type (1) {float: left; background-color: # 61dafb;} div:nth-of-type (2) {margin-top: 100px Background-color: # 58d3e2;} div1div2

You can see that the first div follows. The solution is to set clear for the latter element, and the margin-top of the latter element will be invalid.

Body,div {margin:0; padding:0;} div {width:100px; height:100px;} div:nth-of-type (1) {float: left; background-color: # 61dafb;} div:nth-of-type (2) {clear:both Margin-top: 100px; background-color: # 58d3e2;} div1div2

These are all the contents of the article "example Analysis of floating Features in CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.