[CSS] Floating

Floating is the way how an element is pushed to the left or right (only horizontally), allowing other elements to wrap around it.

1. How Floating Works

The rules of the floating are:

  • The elements are floated horizontally, not vertically.
  • The elements after the floating element will flow around it.
  • The elements before the floating element will not be affected.

 

2. float

The “float” property specifies whether an element should float or not.

  • left
  • right
  • none : (default)
<div>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</div>
<div style="float:left">
  <img src="images/big.png" width="80px" height="80px" />
</div>
<div>Div 1 : Vestibulum convallis venenatis dolor dapibus blandit.
Cras suscipit euismod eleifend.</div>
<div>Div 2 : Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</div>

The 2 <div> elements after the floating image will wrap around it.

 

3. clear

The “clear” property specifies no floating elements are not allowed on the left or the right side of a specified element.

  • left
  • right
  • both
  • none : allows floating elements on both sides (default)
<div>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</div>
<div style="float:left">
  <img src="images/big.png" width="80px" height="80px" />
</div>
<div>Div 1 : Vestibulum convallis venenatis dolor dapibus blandit.
Cras suscipit euismod eleifend. </div>
<div style="clear:left">Div 2 : Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</div>

The “Div2” does not allow the image to float on the left side.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s