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

Editor to share with you what the floating css is written, I believe 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!

What is float (floating)?

The float attribute defines in which direction the element floats.

The float:left element floats to the left.

The float:right element floats to the right.

Float:none default value. The element does not float and appears where it appears in the text.

Float:inherit states that the value of the float attribute should be inherited from the parent element.

Look at a simple piece of code:

Left float

Right float

Meow

.child1 {

Float:left

Height:500px

Width:70%

Background:#aa0;// yellow

}

.child2 {

Float:right

Height:300px

Width:30%

Background:#0aa;// Qing

}

.child3 {

Background:#a0a;// purple

}

201904291427231.png

What is clear?

The clear attribute specifies elements that are not allowed to float on the left or right side of the paragraph.

Clear:left does not allow floating elements on the left.

Clear:right does not allow floating elements on the right.

Clear:both does not allow floating elements on the left and right sides.

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

Clear:inherit states that the value of the clear attribute should be inherited from the parent element.

For example, in the above example, we can clear the float by adding clear:both;, to child3. (floating elements are not allowed on the left and right sides of the child3, so naturally they will no longer follow the two floating elements.)

201904291427232.png

So, what is it like not to float only on one side?

It was supposed to be purple:

So, what is it like not to float only on one side?

It was supposed to be purple:

Child1 right float

Child2 right float

Ha ha.

.child1 {

Float:right

Background:#aa0;// yellow

}

.child2 {

Float:right

Background:#0aa;// Qing

}

201904291427233.png

Then, adding clear:right;, to child2 does not allow floating elements on the right side of child2, so child2 floats to the next line.

201904291427234.png

So when you add clear:left; to child1, why doesn't it work? Leave a small colored egg here, welcome to leave a message for discussion.

Third, the impact of floating

The biggest effect of floating is that when the parent element contains only floating child elements, the height of the parent element collapses (height becomes 0).

Like Sauce Purple: (parent height is 0, cannot display pink background)

Child1 right float

Child2 right float

.parent {

Background:#FBC;// powder

}

201904291427235.png

Fourth, the way to clear the float

1. Add an empty div to the end of the parent element

Div

Child1 right float

Child2 right float

.child1 {

Float:right

Background:#aa0

}

.child2 {

Float:right

Background:#0aa

}

201904291427246.png

It can be seen that the empty div height is 0, which is at the bottom of the parent box, making the parent box back up to its due height.

Why add it at the end? If you add it in the middle, the effect will be purple:

201904291427247.png

Since the left and right sides of the empty div do not allow floating elements, it will start another paragraph, causing the box position to have the same effect as child2 clearing the right float, and the child2 runs below the child1.

two。 Set the overflow attribute on the parent element

Principle: set overflow:hidden or overflow:auto, the browser will automatically check the height of the floating area (to know whether the content of the parent box is overflowed)

Advantages: good browser support

Disadvantages: if the child element exceeds the size of the parent element, it will be hidden, or the parent element has a scroll bar.

Child1 right float

Child2 right float

201904291427248.png

When overflow:auto; is set, a scroll bar appears on the parent element:

201904291427249.png

3. Pseudo element

Principle: similar to setting the clear property

Advantages: good browser support, universal

Child1 right float

Child2 right float

.clearfix {

Zoom:1;//zoom (IE proprietary attribute) can solve the ie6,ie7 floating problem

Display:block

}

.clearfix: after {

Content: "."; / / content: ""; also available

Visibility:hidden

Display:block

Height:0

Clear:both

}

The above is all the content of the article "what is the Writing of floating 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.