CSS Float

css float and clear

CSS Float property is used to flow an element ( usually images, div, li ) to the left or right corner of parent element and the next element wrap around it. A floating element doesn't occupy space on DOM. Thus we have to use clear both after last floating element to avoid wrapping.

Value of CSS Float

  • None
  • Left
  • Right

Image and Text without float

..

This paragraph describes the image shown above. As the para tag is block level element, it will start from the new line. We can see the text is not wraping around the image.

		
    <img src="demo.png" >
    <p>This paragraph describes the image shown above. As the para tag is block level element, it will start from the new line. We can see the text is not wraping around the image.</p>

Float Left

CSS Float Left pull an element to the left corner of parent element, and other elements wrap around it. A floating element doesn't occupy space in flow.

...

This paragraph describes the image shown above. As the para tag is block level element, it will start from the new line until image is floated to left. We can see now the text is warping around the image.



<style>
    img{ float:left}
</style>
		
<img src="demo.png" alt="demo" >
<p>This paragraph describes the image shown. As the para tag is block level element, it will start from the new line until image is floated to left. We can see now the text is warping around the image.</p>

Float left Example

List without floated li
  • List 1
  • List 2
  • List 3
  • List 4
List with floated li
  • List 5
  • List 6
  • List 7
  • List 8

<style>
    .list2 li{ float:left; list-style:none}
</style>

	<ul>
		<li>List 1</l>
		<li>List 2</li>>
		<li>List 3</l>
		<li>List 4</li>
	</ul>

	<ul class="list2">
		<li>List 5</l>
		<li>List 6</li>>
		<li>List 7</l>
		<li>List 8</li>
	</ul>

Div Float Left

(Div without float)

Aside 1
Section 1

(Div float Left)

Aside 2
Section 2

<style>
    *{ margin:0; padding:0}
    .wrap{ width:800px; border:1px solid}
    .aside1{ width:200px; height:200px; background:aqua}
    .section1{ width:600px; height:200px; background:pink}
    .aside2{ width:200px; height:200px; background:aqua; float:left}
    .section2{ width:600px; height:200px; background:pink; float:left}
</style>

	<div class="wrap">
		<div class="aside1">Aside 1</div>
		<div class="section1">Section 1</div>
	</div>
	<div class="wrap">
		<div class="aside2">Aside 2</div>
		<div class="section2">Section 2</div>
	</div>

Float Right

Float Right pull an element to the top Right corner of parent element, and other elements wrap around it.

..

This paragraph describes the image shown. As the para tag is block level element, the image will start from the new line until image is floated to right. We can see now the text is warping around the image.


<style>
    img{ float:right}
</style>

    <img src="demo.png" alt=".." >
    <p>This paragraph describes the image shown. As the para tag is block level element, the image will start from the new line until image is floated to right. We can see now the text is warping around the image.</p>

Div Float Right

(Div without float)

Aside 1
Section 1

(Div with float Right)

Aside 2
Section 2

<style>
    *{ margin:0; padding:0}
    .wrap{width:800px;  border:1px solid}
    .aside1{width:200px; height:200px; background:aqua}
    .section1{width:600px; height:200px; background:pink}
    .aside2{width:200px; height:200px; background:aqua; float:right}
    .section2{width:600px; height:200px; background:pink; float:right}
</style>

	<div class="wrap">
		<div class="aside1">Aside 1</div>
		<div class="section1">Section 1</div>
	</div>
	<div class="wrap">
		<div class="aside2">Aside 2</div>
		<div class="section2">Section 2</div>
	</div>

CSS Clear

CSS Clear property is used to stop an element to wrap around the adjacent floating element.

Values of clear property

  • None( By Default)
  • Left
  • Right
  • Both

Simple Floating Div's without clear

Aside 3
Section 3

This Paragraph will wrap around Adjacent floating Divs


<style>		
    *{ margin:0}
    .wrap{ width:800px;  border:1px solid}
    .aside3{ width:200px; height:200px; background:aqua; float:left}
    .section3{ width:600px; height:200px; background:pink; float:left}
</style>

<div class="wrap">
	<div class="aside3">Aside 3</div>
	<div class="section3">Section 3</div>
	<p>This Paragraph will wrap around Adjacent floating Divs</p>>
</div>


Floating Div with clear

Aside 4
Section 4

This Paragraph will not wrap around Adjacent floating Divs as the third div is cleared from both sides


<style>
    *{ margin:0 }
    .wrap{width:800px;  border:1px solid}
    .aside4{width:200px; height:200px; background:aqua; float:left}
    .section4{width:600px; height:200px; background:pink; float:left}
    .clear{ clear:both}
</style>
	
<div class="wrap">
    <div class="aside4">Aside 4</div>
    <div class="section4">Section 4</div>
    <div class="clear"></div>
    <p>This Paragraph will not wrap around Adjacent floating Divs as it is clear from both sides</p>>
</div>

Clear Both

CSS Clear Both Property does not allow any element to wrap around any adjacent Floating element in both Left and Right Directions.



`