Float in CSS

I have a poor foundation for the front-end CSS technology and want to make up for it. Due to the limited time spent in my spare time, I have read some articles. We hope to get acquainted with common CSS type attributes as soon as possible.

 

As follows, I will talk about my understanding of float. I have long heard that float is very difficult and hard-to-understand. I used to treat it as far as possible. I don't need it if I don't need it. I have not been paying close attention to him until I recently met him on the Internet. Although I am afraid it is difficult to see through my current skills, I will first make a preliminary understanding of him.

 

1 floating package

In fact, there is no need to think about how complicated it is. The essence of float is package and destruction. It is actually a display with a orientation: inline-block (such as float: left) is encapsulated to realize the adaptive effect of width, such as the adaptive text size of Button width.

Its CSS code is as follows:

 

The Html code is as follows:

 

 

2. destructive effects of floating

Such as text surround Image Display Effect :;

The reason for this effect is that the image contains the float attribute, which destroys its normal lnlineboxes;

Lnlineboxes does not display the content in blocks. Instead, the content is arranged in a line. Normally, the content is arranged in a line with the text, which is aligned with the text baseline. The height of Lnlineboxes is determined by the highest internal height (if the image height is the highest, the height of the image itself is equal to the height of lnlineboxes). When the image floats, it is separated from linebox, there is no height (relative height. In fact, I do not fully understand this point. I will share it with you later), so that other linebox elements can be re-integrated, arranged by floating elements.