-->

CSS Float Tutorial


The most important work is done with the CSS float when creating the layout. Floats are also used when text and pictures are together. There are basically two values ​​of float left and right. If left, the element will be pushed to the left and if given to the right, it will be moved to the right. For example, if you want to take an image or picture to the left of the text, for example, if there is a picture with the writing in the letter magazine

img
float: left;


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

<p> <img src = "/ images / upload_f2.png" width = "100" height = "140">
Css learning home "text wrap".
</p>
</body>
</html>



float: right day the image will move to the right.



** Float elements can be placed side by side or side-by-side. The float always works horizontally.



Usually in HTML the elements are positioned vertically one after the other like many li, p or div etc. Now to bring them side by side means to bring one to the right and another to the end of the browser like this float: left; It will work.



** Any block level element occupies space in the browser or from the right end to the other so that no other block level element can be inserted next to the block level element. However, when you give a float, it will leave the rest of the space with the content amount of the element for another floated element.



When making the layout, it is decided with these floats which div will be next to which div. E.g.

.header {float: left; width: 100%;
border: 1px solid; height: 100px;
.left_menu {width: 24.999%; float: left; border: 1px solid; height: 250px; clear: both;
.content float: left; width: 74%; border: 1px solid; height: 250px;
.footer float: left; width: 100%; border: 1px solid; height: 100px;


<! DOCTYPE html>
<html>
<head>
<style>
.header {float: left;
width: 100%;
border: 1px solid;
height: 100px;
.left_menu
width: 24.999%;
float: left;
border: 1px solid;
height: 250px;
clear: both;
.content {float: left;
width: 74%;
border: 1px solid;
height: 250px;
.footer {float: left;
width: 100%;
border: 1px solid;
height: 100px;
</style>
</head>
<body>
<div class = "header"> Header </div>
<div class = "left_menu"> Left Menu </div>
<div class = "content"> Main Content </div>
<div class = "footer"> Footer </div>
</body>
</html>

The default value of float is none.

clear has a property with which floated elements can be removed. Floated elements on the left, right or both sides can be removed using the left, right and both values. A floated element will have a floated element on one side and not on the other. This can be fixed with clear properties. E.g.


body {width: 400px; margin: 1em auto;
h1 {float: left; margin-top: 0;
.navigation {float: right; margin: 0; list-style: none;
.navigation li {float: left;
.navigation a {display: block; margin-left: 0.5em; padding: 5px; border: 1px solid # 000; color: # 000; text-decoration: none;
.ntext {.clear: both;


<! DOCTYPE html>
<head>
<style type = "text / css">
body
width: 400px;
margin: 1em auto;
}

h1
{float: left;
margin-top: 0;
}

.navigation
{float: right;
margin: 0;
list-style: none;}

.navigation li
{float: left;}
.navigation a
{display: block;
margin-left: 0.5em;
padding: 5px;
border: 1px solid # 000;
color: # 000;
text-decoration: none;
}
.ntext
{clear: both;
}
</style>
</head>
<body>
<ul class = "navigation">
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> About Us </a> </li>
<li> <a href="#"> Contact </a> </li>
</ul>
<p class = "ntext"> HTML CSS Learning home </p>
</body>
</html>



clear: both; Pick up and see the text will appear randomly around the menu.
Facebook Comments

Follow by Email