Float

We can float HTML elements by giving them the following values;

none – The element does not float. It is default value for any element.
inherit – The element inherits the value of float from its parent element.
left – The element floats to the left.
right – The element floats to the right.

.img1 {
    float: right;
}

.img1 {

float: right;

}

Try it

Clear and Float

We can clear HTML elements by giving them the following values;

none – Allows floating elements on both sides. This is default
left – Does not allow floating elements on the left side.
right– Does not allow floating elements on the right side.
both – Does not allow floating elements on the both sides.
inherit – The child element inherits the clear value from its parent element.

.a {
    float: left;
    width: 50px;
    padding: 0px;
    height: 50px;
background-color:green;

}

.b {
    float: left;
    width: 50px;
    padding: 0px;
    height: 50px;
clear:left;
background-color:red;
}

.a {

float: left;

width: 50px;

padding: 0px;

height: 50px;

background-color:green;

}

.b {

float: left;

width: 50px;

padding: 0px;

height: 50px;

clear:left;

background-color:red;

}

Try it

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: brown;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}

li a:hover {
    background-color: red;
}

.active {
    background-color: green;
}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: brown;

}

li {

float: left;

}

li a {

display: inline-block;

color: white;

text-align: center;

padding: 16px 18px;

text-decoration: none;

}

li a:hover {

background-color: red;

}

.active {

background-color: green;

}

Try it

Float none

img {
    float: none;
}

img {

float: none;

}

Try it

Web Layout

<html>
<head>
<style>
* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: grey;
    color: white;
    padding: 20px;
}
.column {
    float: left;
    padding: 20px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 10px;
    margin-bottom: 10px;
    background-color: lightgrey;
    color: purple;
}
.menu li:hover {
    background-color: red;
}
</style>
</head>
<body>

<div class="header">
  <h1>T4-Tutorials</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li><a href="https://t4tutorials.com/html"/>HTML</a></li>

      <li><a href="https://t4tutorials.com/css-tutorials/">CSS</a></li>

      <li><a href="https://t4tutorials.com/php-server-side-scripting-language-for-website-development"/>PHP</a></li>

      <li><a href="https://t4tutorials.com/keyword-worth-check-in-seo-search-engine-optimization"/>SEO</a></li>
    </ul>
  </div>

  <div class="column content">
    <h1>About Learning</h1>
    <p>Welcome To T4-tutorials</p>
 <a href="https://www.T4tutorials.com">T4tutorials.com</a>
  </div>
</div>
<div class="footer">
  <p>Thanks For visit us</p>
</div>
</body>
</html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

.header, .footer {

background-color: grey;

color: white;

padding: 20px;

}

.column {

float: left;

padding: 20px;

}

.clearfix::after {

content: "";

clear: both;

display: table;

}

.menu {

width: 25%;

}

.content {

width: 75%;

}

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

}

.menu li {

padding: 10px;

margin-bottom: 10px;

background-color: lightgrey;

color: purple;

}

.menu li:hover {

background-color: red;

}

</style>

</head>

<body>

<h1>T4-Tutorials</h1>

</div>

<ul>

</ul>

</div>

<h1>About Learning</h1>

<p>Welcome To T4-tutorials</p>

<a href="https://www.T4tutorials.com">T4tutorials.com</a>

</div>

<p>Thanks For visit us</p>

</div>

</body>

</html>

Try it

Float CSS
By: Prof. Dr. Fazal Rehman Shamil | Last updated: March 3, 2022

Float

Clear and Float

Navigation menu

Float none

Web Layout

Video Lecture

Related Posts:

Leave a Reply