CSS Float and Clear , Overflow

CSS Float and Clear

Float allows elements to float to the left or right, while clear can be used to control the behavior of elements after floating.

Example:

img { float: left; margin-right: 20px; } p { clear: both; }

In this example, an image will float to the left, and the paragraph will clear the float, appearing below the image.

CSS Overflow

Sometimes, the content inside an element may be larger than the element itself. The overflow property in CSS controls how content is displayed in such cases.

There are four possible values for the overflow property:

visible (default): Content is not clipped and overflows the element’s box.
hidden: Content that exceeds the element’s box will be hidden.
scroll: Scrollbars will be added so users can scroll to see the hidden content.
auto: Scrollbars will appear only if the content overflows the element.

Example:

div { width: 200px; height: 100px; overflow: scroll; }

In this example, if the content inside the div is larger than 200 x 100 pixels, scrollbars will appear, allowing users to scroll through the hidden content.

Request more information

CSS Float and Clear , Overflow