Wednesday, 14 June 2017

CSS float Property

The float CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it.
Note: Elements after a floating element will flow around it. To avoid this, use the clear property.
Syntax - Float: none | left | right | inline-start | inline-end | initial | inherit;

Property Values:
Value
Description
none
The element is not floated, and will be displayed just where it occurs in the text. This is default.
left
The element floats to the left.
right
The element floats the right.
inline-start
The element must float on the start side of its containing block, that is the left side on ltr scripts and the right side on rtl scripts.
inline-end
The element must float on the end side of its containing block, that is the right side on ltr scripts and the left side on rtl scripts.
initial
Sets this property to its default value.
inherit
Inherits this property from its parent element.





Ex-1. float to the left:
img {
    float: left;
}
p.clear {
    clear: both;
}

<img src="logocss.gif" width="95" height="84">
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>

Output:
   
Ex-2. float to the right, and Clear floats with the clearfix hack:
div { border: 3px solid #73AD21; }
.img1 { float: right; }
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.img2 { float: right; }

<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>
<div><img class="img1" src="w3css.gif" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>
<p style="clear:right">Add a clearfix class to the containing element, to fix this problem:</p>
<div class="clearfix"><img class="img2" src="w3css.gif" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

Output:





















Ex-3. CSS initial keyword
div {
    color: red;
    border: 1px solid blue;
}
h1  { color: initial; }

<div>
  <h1>Initial</h1>
  <p>The header above and this paragraph is inside a DIV element, The DIV element has the color property set to "red". The header element has its color property set to "initial", which in this case is "black".</p>
</div>

<p><b>Note:</b> The "initial" keyword is not supported in Internet Explorer 11 and earlier versions, or in Opera 15 and earlier versions.</p>

Output:

Ex-4. CSS inherit keyword
span {
    color: blue;
    border: 1px solid black;
}
.extra span { color: inherit; }

<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>

<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>

<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>

Output:






No comments:

Post a Comment