Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css floats

339 views

Published on

This Presentation is on the CSS Floats. Clear all concepts of the floating in the CSS.
Webtechlearning in Chandigarh

Published in: Design
  • Be the first to comment

  • Be the first to like this

Css floats

  1. 1. CSS – Cascading Style Sheet CSS - Float Call US: +91-9915337448 Email Us: info@webtechlearning.com
  2. 2. CSS Layout - float and clear • The float property specifies whether or not an element should float. • The clear property is used to control the behavior of floating elements. Float Left Float Right Call US: +91-9915337448 Email Us: info@webtechlearning.com
  3. 3. The float Property • In its simplest use, the float property can be used to wrap text around images. Call US: +91-9915337448 Email Us: info@webtechlearning.com img { float: right; margin: 0 0 10px 10px; }
  4. 4. The clear Property • The clear property is used to control the behavior of floating elements. • Elements after a floating element will flow around it. To avoid this, use the clear property. • The clear property specifies on which sides of an element floating elements are not allowed to float: Call US: +91-9915337448 Email Us: info@webtechlearning.com
  5. 5. The clear Property • For Example Call US: +91-9915337448 Email Us: info@webtechlearning.com div { clear: left; }
  6. 6. The clearfix Hack - overflow: auto; • If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. • Then we can add overflow: auto; to the containing element to fix this problem: Call US: +91-9915337448 Email Us: info@webtechlearning.com .clearfix { overflow: auto; }
  7. 7. All CSS Float Properties Property Description clear Specifies on which sides of an element where floating elements are not allowed to float float Specifies whether or not an element should float overflow Specifies what happens if content overflows an element's box overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area Call US: +91-9915337448 Email Us: info@webtechlearning.com

×