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!