Use of float and clear in CSS

Use of float and clear in CSS

In this paper, we focus on the use of the float and clear properties in CSS, a float object can be left or right, an object set to float, will move left or right to its parent container's boundary according to the direction of the setting, or the boundary of the float object before it. A non-float object or content that is immediately followed is surrounded in its opposite direction.

Float and clear property usage in CSS

The best way to implement multi-column typesetting is to use the float property, and float is a property that will benefit you. A float object can be left or right, and an object set to float will be moved left or right to its parent container's boundary, or to the boundary of the float object before it, and the non-float object or content immediately following it is enclosed in its opposite direction, depending on the direction of the setting.

Here are some important guidelines for using the float and clear properties:

A float object that will jump out of its block non-float stream of content, in other words, if you want to float a box to the left, the block-level non-float object behind it will appear below and the inline content will be surrounded

For a piece of content to surround a float object from one side, the content must either be inline or set to float in the same direction

A float object that, if not set width, is automatically indented to the width of the content it contains, so it is best to explicitly set the width for the float object

An object that has the clear property set, will not enclose the float object in front of it

An object that has both a clear and a float property set, and that only the Clear:left property is in effect, Clear:right does not work

CSS clear usage the clear is used to clear the side of an element of the floating element, assume that two div blocks used floating (CSS float) and together, if you want to let these two elements not together, you can use clear to declare the CSS float floating effect, The following examples are shown in the picture.

The left blue block and the green block on the right, we used float so that the two blocks can be lined up horizontally, and if you don't need a green block to float on the right side of the blue block, you can add the style of the green block to the clear:left this way, It means emptying the floating block on the left side of the green block, and the effect will look like this.

When the green block clears the floating block on the left side with clear, wait for the float:left to fail, and then arrange it naturally!
CSS Clear Language Example box {float:left; Clear:left; This example is meant to clear the floating element to the left of the box block.
The CSS clear can have a left (to clear the floating block on the right), both (clear the floating block on the starboard side), a (clear two floating blocks), none (this is the default, there are floating blocks on both sides) and the last inherit, but the reason for IE support , so I'm not using inherit this value

Use of float and clear in CSS