CSS Layout - float and clear

The float is utilized with pictures, however it is additionally valuable when working with layouts.

The float property indicates regardless of whether a component ought to float.

The clear property is utilized to control the conduct of drifting elements.

The values for the buoy property are left, right, and none.

The drift Property

In its most straightforward use, the float property can be utilized to fold message over images.

The following precedent indicates that a picture should buoy to one side in a text:


img {
    skim: left;
    edge: 0 15px 15px;
Try it yourself »

The clear Property

The clear property is utilized to control the conduct of skimming elements.

Elements after a skimming component will stream around it. To keep away from this, utilization the clear property.

The clear property indicates on which sides of a component skimming components are not permitted to float:


div {
    clear: right;
Try it yourself »

The clearfix Hack - flood: auto;

If a component is taller than the component containing it, and it is skimmed, it will flood outside of its container.

Then we can include overflow: auto; to the containing component to fix this problem:


.clearfix {
    flood: auto;
Try it yourself »