Float CSS

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;
}

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;
}

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;
}

Try it

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>

Try it

Float CSS

Float

Clear and Float

Navigation menu

Float none

Web Layout

Video Lecture