Detailed introduction to CSS basic knowledge float

I wrote an article on the position of basic CSS knowledge some time ago. At that time, my understanding of float was not very accurate, which was pointed out by many readers on MOOC.com (the original text has been corrected, and I apologize if it was misleading). Now I will learn more about float and share my learning experience with you.

Basic knowledge of floating

Floating has 4 attributes: left (left floating), right (right floating), none (not floating), inherit (inherited).

The containing block of a floating element is its nearest block-level ancestor element.

The floating element will be offset left (or right) until its outer boundary touches the "inner boundary of the containing block" or "the outer boundary of another floated element".

The floating element is separated from the standard document flow. Text and line-level elements will wrap around the element, while block-level elements will not be affected.

To float a non-replacement element, a width must be declared for the element, otherwise the width of the element tends to 0.

The margin (margin) of a floating element will not be merged with the margin of other elements.

In-depth study of floating

The top edge of a floating element cannot be higher than the containing The top of the previously generated block-level element or row-level element in the block.

Floating elements cannot overlap each other. If there is not enough space to place a floating element in the horizontal direction, it will move downward until there is enough space or there are no more floating elements.

Floating elements cannot overflow the left, right, and upper boundaries of the containing block, but can only overflow the lower boundary. (When a floating element overflows the lower boundary, some browsers will increase the height of the containing block so that the floating element can be included in the containing block, resulting in a large blank space, causing browser compatibility issues.)

Setting negative for floating elements When using margins, although the floating element appears to overflow the containing block, it does not actually violate the above rules.

Special case, when the floating element is wider than the containing block, the floating element will overflow in the opposite direction of the offset.

The negative effects of floating

The background cannot be displayed

The border cannot be opened

margin padding cannot be displayed correctly

How to clear the float

/* 方法1，当父包含块缩成一条时无效 */

.clear-float2{ overflow:hidden; width:100%; }   
/* 方法2，overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容，从而实现了清除浮动。 */

.clear-float3{ overflow: auto; zoom: 1; }   
/* 方法3，zoom是在处理兼容性问题，hidden和auto都能清除浮动，据说auto对seo更友好 */

The above is the basic knowledge of CSS The detailed explanation of float is all the content shared by the editor. I hope it can give you a reference, and I also hope you will support the PHP Chinese website.

The above is the detailed content of Detailed introduction to CSS basic knowledge float. For more information, please follow other related articles on the PHP Chinese website!