An analysis of div+float, a very important concept in website design

In website construction, you will always encounter various problems with HTML and CSS. Open the homepage of the website https://www.jb51.net and view the source code. The screen is full of HTML tags, with no less than dozens of divs.
There are two types of elements in HTML: inline elements (inline elements) and block elements. How do you understand them?

Inline elements are elements that do not wrap and can adapt in size. For example, a img font span. When we build a website, the text content inside is an inline element.
Block elements are elements that will wrap to the next line regardless of the content, width or height, such as div p li, which are generally used in website layout.
The switching between inline elements and block elements uses the two CSS properties display: inline block.
For inline elements that contain block elements, use display:inline-block;
inline is only used when it contains inline elements.
Inline elements can contain inline elements, but try not to contain block elements.
Inline elements and block elements can be nested inside block elements.
Floating on a website means drifting to the border of the parent element, or the border of the previous floating element. Floating is very useful when using ul li to make a menu, and it can also be used when using div to make a menu.

float:right ;
Float rigth can make the floating box abandon its original position. The following floats will follow closely and float to the right edge of the parent element border to stop. It is best if we use floats to make website menus. It is best for a group of menus to all float or not float at all. If there is one menu in the middle that does not float, a strange display effect will appear. If the space is not large enough, it can adapt downwards. Leave the parent element until it is filled.

float:left ;
float left and right are actually the same, except that one floats to the left and the other floats to the right. They will float to the parent border or the previous floating block. If in your website, one of the divs in a pair has a height greater than the other divs, the second floating div will be stuck behind it until there is enough space.
For inline elements, if they float, the style will be set to block elements and the width and height can be set. Otherwise, these two attributes are invalid. However, although it is a block element, it will give up the position on the right side of the line and can display other content. For example, the text package image in many website layouts is based on this principle ///

Clear float. That is to clear the floating effect. The key to floating is to make room and follow the previous floating quickly.

<<: Implementation of CSS heart-shaped loading animation source code

>>: Detailed explanation of several examples of insert and batch statements in MySQL