Difference between revisions of "CSS/C3/Float-and-Overflow-in-CSS/English"

• Float, Clear and Overflow properties of an element in CSS
• Use these properties to achieve the desired output.

System Requirements

• Ubuntu Linux OS v 18.04
• CSS3
• HTML5
• gedit Text Editor and
• Firefox web browser

However you may use any other editor or browser of your choice.

https://spoken-tutorial.org

If not, please go through the HTML and CSS tutorials on this website.

Please download and extract them.

Make a copy and then use them while practising.

• It is used to set the horizontal positioning of an element inside the parent block.
• It allows the text to wrap around an element.

• left: this positions the element to the left side of the parent block
• right: this positions the element to the right side of the parent block

• none (default): does not position the element
• initial: sets the float property to its default value
• inherit : inherits the position of its parent element

Let us understand these through examples.

The same is available in the Code files link for practice.

Type:

<img src= "veg.png">

Between the div tag and p tag, type the code as shown.

Highlight:

veg.png

Please download and keep it in the folder where you have saved your code files.

I have opened it in the gedit Text Editor.

Type-

img {

width: 100px;

height: 90px;}

Next to the div tag, type the code as shown.

Now open the file Mypage.html in a web browser.

Highlight the output

The image is added in the div block.

The text has floated outside the block due to its restricted size.

To arrange the image and text inside the block, we will use float property.

Type:

float: left;

In the img tag, next to the height property, type the code as shown.

Highlight the output

Now the image is set to the left side and the text is wrapped around it.

float: right;

[Firefox]

Highlight the output

Update:

float: inherit;

Update the code as shown.

Highlight the output

Now the image and text are set to the previous style.

This is because the image inherits the property of the div block.

Observe that the div block does not have float property.

Type:

float: right;

Inside the div tag, next to the padding property, type the code as shown.

Highlight the output

Now the block has shifted to the right side.

The image inside it also shifted to the right because it inherits the div block property.

Update:

float: left;

Inside the img tag, update the code as shown.

Highlight the output

Though the block was set to the right, the image has shifted to the left.

This is because the float value of the image is set to left instead of inherit.

Earlier float property of the image was inheriting the float value of the div block.

Delete: float: right;

Ctrl + S

Delete the float property of the div tag and save the file.

Highlight the output

Both the block and image are set to the left now.

• It is related to float.
• It prevents an element from being displayed next to floated elements.

• left: elements are not allowed to float on the left side of the specified element
• right: elements are not allowed to float on the right side of the specified element

• both: elements are not allowed to float on both sides of the specified element
• none (default):elements are allowed to float on both sides of the specified element

• initial: sets the clear property to its default value
• inherit: element inherits the clear value of its parent.

Let us try these.

Type:

clear: none;

In the p tag, next to the font property, type the code as shown.

Highlight the paragraph

There is no change in the output because none is the default value of clear property.

The text floats around the image.

Update:

clear: both;

Update the code as shown.

Highlight the paragraph

Now the paragraph moved down because it does not allow the image to float on both sides.

Highlight the paragraph

That is why the paragraph flows out of the block.

To solve this problem, we use overflow property.

Let us understand about this.

• visible (default):
  • Overflowed content is not clipped.
  • It is visible outside the block.
• scroll:
  • Overflowed content is clipped.
  • A scrollbar is added to see the whole content.

• auto:
  • Automatically adds a scrollbar whenever required.
• hidden:
  • Overflowed content is clipped and is invisible.

• initial:
  • Sets the property value to its default value.
• inherit:
  • Inherits the property value from its parent element

Let us try these.

Type:

overflow: auto;

In the div tag, next to the padding property, type the code as shown.

Highlight:

overflow: auto;

This means the text will not overflow outside the border.

Highlight the paragraph

Highlight the paragraph

This time, the overflowed content is clipped.

And a scrollbar is added to the block to see the overflowed content.

You may explore visible, scroll and hidden overflow property values on your own.

Let us summarize.

• Float, Clear and Overflow properties of an element in CSS
• Use these properties to achieve the desired output

• Open the file webpage.html which you have created earlier.
• Add the image veg.png in the div block.

• Open the file styles.css which you have created earlier.
• Update the following for div block
  • width to 600px.
  • height to 200px.
  • overflow value to scroll.
• Set the float value to right for the image.

• Link the styles.css file to webpage.html file
• Observe the output.

About Spoken Tutorial project

Please download and watch it.

For more details, please write to us.

Thank you for watching.