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

(How to write a CSS in HTML code)

		

	<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>

(Browser Window)

..

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.


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.

(How to write a CSS in HTML code)


		<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>

(Browser Window)

...

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.


Float left Example

Lets create a Default Unordered list

(How to write a CSS in HTML code)


<style>
		.list2 li{ float:left}}
	</style>

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

	<ul class="list2">
		<li>List 1</l>
		<li>List 2</li>>
		<li>List 3</l>
		<li>List 4</li>
	</ul>

(Browser View)

List without floated Li
  • List 1
  • List 2
  • List 3
  • List 4
List with floated Li
  • List 1
  • List 2
  • List 3
  • List 4

Div Float Left

(How to write a CSS in HTML code)


	<style>

	*{ margin:0; padding:0}
	.wrap{width:800px; height:auto; 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"></div>
		<div class="section1"></div>
	</div>
	<div class="wrap">
		<div class="aside2"></div>
		<div class="section2"></div>
	</div>

(Div without float)


(Div float Left)


Float Right

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

(How to write a CSS in HTML code)


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

	<img src="demo.png" >
	<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>

(Image with float left in Browser Window)

..

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.

Div Float Right

(How to write a CSS in HTML code)


	<style>
	
	.wrap{width:800px; height:auto; 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"></div>
		<div class="section1"></div>
	</div>
	<div class="wrap">
		<div class="aside2"></div>
		<div class="section2"></div>
	</div>

(Div without float)


(Div with float Right)


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

(How to write a CSS in HTML code)


	<style>			
	.wrap{width:800px; height:auto; border:1px solid}
	.aside2{width:200px; height:200px; background:aqua; float:left}
	.section2{width:600px; height:200px; background:pink; float:left}
	</style>

	<div class="wrap">
		<div class="aside2"></div>
		<div class="section2"></div>
		<p>This Paragraph will wrap around Adjacent floating Divs</p>>
	</div>

(Image without float in Browser Window)

(Div with float Left and without clear)

This Paragraph will wrap around Adjacent floating Divs


Simple Floating Div's with clear

(How to write a CSS in HTML code)


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

(Image without float in Browser Window)

(Div with float Left and without clear)

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


Clear Both

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



`