LearnCodeHere Free online web tutorials

CSS Tutorial

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

« Previous Next »

The CSS float property is a positioning property. It is used to push an element to the left or right.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

CSS - Float

The float property is used for positioning and formatting content in a container.

The float property can take the following values −

none : It specifies that the element is not floated, it displayed just where it occurs in the text.

left : It is used to float the element to the left.

right : It is used to float the element to the right.

inherit : The element inherits the float value of its parent

Example : CSS - Float

<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>

<p>In this example, the image will float to the right in the paragraph.</p>
<p><img src="css.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
CSS stands for Cascading Style SheetsCSS is a widely used language on the web.CSS describes
how HTML elements are to be displayed on screenHTML was created to describe the content of
a web page, like:CSS, is a simple design language intended to simplify the process of making
web pages presentable.CSS handles the look and feel part of a web page.HTML, CSS,JavaScript
are used for web designing. It helps the web designers to apply style on HTML tags.It
an additional feature to HTML. It is generally used with HTML to change the style webpages
and user interfaces. ICSS is used along with HTML and JavaScript in most websites create
user interfaces for web applications and user interfaces for many mobile applications.
You can add new looks to your old HTML documents.CSS style definitions are saved in external
CSS files so it is possible to change the entire website by changing just one file.
</p>
</body>
</html>

When the above code is compiled , it produces the following result.

Result

float CSS stands for Cascading Style SheetsCSS is a widely used language on the web.CSS describes how HTML elements are to be displayed on screenHTML was created to describe the content of a web page, like:CSS, is a simpledesign language intended to simplify the process of making web pages presentable.CSS handles the look and feel part of a web page.HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style on HTML tags.It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. ICSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.You can add new looks to your old HTML documents.CSS style definitions are saved in external CSS files so it is possible to change the entire website by changing just one file.

CSS - Clear

The CSS clear property specifies what elements can float beside the cleared element and on which side.

The clear property can take the following values −

none : Allows floating elements on both sides. This is default

left : No floating elements allowed on the left side.

right : No floating elements allowed on the right side.

inherit : The element inherits the clear value of its parent

If an element is taller than the element containing it, and it is floated, it will "overflow" outside of its container:

Example : CSS - Clear

<!DOCTYPE html>
<html>
<head>
<style>

div {
border: 3px solid blue;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<div class="clearfix">
<img class="img2" src="css.jpg" alt="Pineapple" width="150" height="150">
CSS stands for Cascading Style SheetsCSS is a widely used language on the web.
</div>
</body>
</html>

When the above code is compiled , it produces the following result.

Result

« Previous Next »

C++ Tutorial	CSS Tutorial	C# Tutorial	PHP Tutorial
Java Tutorial	SQL Tutorial	JQuery Tutorial	MySQL Tutorial
HTML - Tutorial	Node.Js Tutorial	JavaScript Tutorial	Python Tutorial
MySQL Installation	Node.js Installation	XAMPP -- Installation	Python Installation
C++ - Environment Setup	Java - Environment Setup	C# - Environment Setup	Responsive Web Design

CSS - Float/Clear

CSS - Float

Example : CSS - Float

Result

CSS - Clear

Example : CSS - Clear

Result