Download
    Interview Question     &Answer
Main Menu
CSS Float@ Shwetank education.com
Definition -  CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
Float is very often used for images, but it is also useful when working with layouts.

img {
float:right;
}
Example
<html>
<head>
<style type="text/css">
img { float:right;
} </style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p>
<img src="images/Untitled-2_23.gif" width="95" height="84" />
You learn CSS.You learn CSS.You learn CSS. You learn CSS.You learn CSS.You learn CSS. You learn CSS.You learn CSS.You learn CSS.You learn CSS. You learn CSS.You learn CSS.You learn CSS.You learn CSS.You learn CSS. You learn CSS.You learn CSS.You learn CSS.You learn CSS.You learn CSS. </p>
</body>
</html>

Output

In the paragraph below, we have added an image with style float:right. The result is that the image will float to the right in the paragraph.

You learn CSS.You learn CSS.You learn CSS. You learn CSS.You learn CSS.You learn CSS. You learn CSS.You learn CSS.You learn CSS.You learn CSS. You learn CSS.You learn CSS.You learn CSS.You learn CSS.You learn CSS. You learn CSS.You learn CSS.You learn CSS.You learn CSS.You learn CSS.


The property clear
The clear property is used to control how the subsequent elements of floated elements in a document shall behave.
The property clear can assume the values left, right, both or none. The principle is, if clear, for example, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.
<div id="picture">
<img src="shwetank.jpg" alt="shwetank gupta">
</div>
<p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> To avoid the text from floating up next to the picture, we can add the following to our Cascading Style Sheet:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both; }


IT  Projects Links
M-Tech Thesis
Php Project
Java Project
Asp.Net Project
Android Project
Vb .Net Project
Html Project

------------------------------- Electronics  Project
Networking
Embedded system
Telecom
Robotics
CCNA
------------------------------- Latest IT  News


Copyright 2010-2015    shwetankeducation.com
Privacy & Terms