Thoughts on floating and clearing in HTML_html/css_WEB-ITnose

We need to use the float attribute when laying out, and we need a clear float to cooperate with it to achieve the expected goal.

The definitions of float and clear on w3s are: float: The float attribute defines in which direction the element floats.

                                                                                                                                                                                                   

A simple example (I won’t post the code:)):

This is the effect we expect to achieve after floating and then clearing the float (clear:both) .

What will happen if the floats are not cleaned up? What about cleaning only the right side? What about cleaning only the left side?

The effect after clear:left is the same as we expected. Why do these different results occur? And why is the text there but the color missing?

After checking the information and asking friends, I got the answer I wanted:

The left part and the right part floated out of the document flow, and the tail part automatically ran to it when it saw no one above it. The underside of the head went (TAT), which is why we can't see the yellow color on the tail after we didn't clean up the float. Then why can you see the font at the end? Floating is just similar to but not exactly the same as absolute positioning. will completely break away from the document flow and will continue to affect the content of the document flow, so we can see the text description.

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

When the clear attribute is not used, the figure is as follows in the opacity: 0.5 state:

(⊙o⊙)... That's probably it.

This is my first time blogging! This is my first time blogging! This is my first time blogging! Say important things three times. ahaaaaaaa, the content is very simple and just for beginners. I resigned from my job as a civil engineering engineer after I just graduated, and then I was planning to get into front-end. I heard that if I want to learn front-end well, I need to read more blogs and write more blogs, so I came here. Try to get into the habit of blogging.

In case someone sees it (will anyone see it?) and feels the need to complain later, please correct me if there are any mistakes, welcome guidance from veterans, and exchanges with newcomers!