Thoughts on floating and clearing in HTML, floating clearing in HTML

Source: Internet
Author: User

Thoughts on floating and clearing in HTML, floating clearing in HTML

During layout, float attributes must be used. At the same time, we need a clear floating attribute to work with to achieve the expected goal.

On w3s, float and clear are defined as: float attribute to define the direction in which the element floats.

The clear: clear attribute specifies whether other floating elements are allowed on the side of an element.

A simple example (I will not post the code or anything :)):

This is what we expected to achieve after floating and then clear the floating (clear: both.

What if the float is not cleared? Just clear the right? Just clear the left?

<! -- No floating cleaning effect --!>

<! -- Clear: float on the right side is not allowed. --!>

Clear: left is the same as we expected. Why are these different results? Why is text color missing?

After checking the information and asking a friend, I got the desired answer:

The left part and the right part are moved out of the Document Stream, and no one on the end automatically runs to the bottom of the header (TAT ), this is why we don't see the yellow tail after the float is cleared. Why can we see the font at the end? Floating onlySimilarIn absolute positioning andNot exactly the sameThe absolute positioning will be completely out of the Document Stream and will continue to affect the content of the document stream, so we can see the text description.

In fact, we only need to use an opacity attribute to fully understand it.

The clear attribute is not used in the opacity: 0.5 status.

(⊙ O ⊙ )... This is probably the case.

 

 

This is my first blog! This is my first blog! This is my first blog! The important thing is said three times. Ahaaaaaaa, the content is very simple for beginners. I have just graduated from civil engineering and resigned, and I am ready to contact the front-end. I heard that if I want to learn the front-end well, I need to read more blogs and write more blogs, so I am here. Strive to develop the habit of writing blogs.

In case someone sees it (Will someone see it ?) After that, I thought it was necessary to talk about it. If there are any errors, please correct me. You are welcome to give guidance from the veteran and contact new people!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.