Login With Github

CSS Float

The HTML element can move left or right until its outer edge touches the border of the element that contains it.At the same time, other elements around the floating element will also be rearranged.

Floating elements are commonly used for:

  • 1. The images in the paragraph float to the left or right so that the text surrounds them.
  • 2. Make a modern page layout.

The float Property

The float property in CSS can float elements. The float property has the following four values:

  • left - The element floats to the left in its parent container
  • right- The element floats to the right in its parent container
  • none - The element does not float (will be displayed just where it occurs in the text). This is default
  • inherit - The element inherits the float value of its parent

The following example specifies that the image floats to the left in a piece of text.

Cascading Style Sheets, fondly referred to as 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. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Similarly, you can also specify that the image floats to the right in the text.

Adjacent Floating Elements

You can use the float property to arrange the elements horizontally and make each floating element adjacent to each other.

With this feature, you can implement a simple horizontal menu, such as:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

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

li a:hover {
    background-color: #111;
}

.active {
    background-color: red;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

You can also create a horizontal image list and set the spacing between images, for example:

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}

.img-container {
    float: left;
    width: 33.33%;
    padding: 5px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
</style>
</head>
<body>

<h2>Images Side by Side</h2>
<p>With the CSS float property, it is easy to float images side by side:</p>

<div class="clearfix">
  <div class="img-container">
    <img src="img_fjords.jpg" alt="Fjords" style="width:100%">
  </div>
  <div class="img-container">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="img-container">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

</body>
</html>

The clear Property

The clear property specifies which side of the element can't have floating elements.The clear property has the following four 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
  • both - No floating elements allowed on either the left or the right side
  • inherit - The element inherits the clear value of its parent

In the following example, we use the clear property to insert a line of text in the horizontal image list:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialdocs.com</title>
<style>
.thumbnail
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
.text_line
{
	clear:both;
	margin-bottom:2px;
}
</style>
</head>

<body>
<h3>Photos List</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">the second line</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

The clear property also solves the problem of overflowing floated elements in the parent container.If the height of a floating element (such as a image) is greater than the height of the parent container, the floating element will not be completely contained in the parent container.You can use the following CSS code to solve this problem:

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

Here is a complete example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.img2 {
    float: right;
}
</style>
</head>
<body>

<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>

<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

<p style="clear:right">Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

</body>
</html>

Note: You will learn about the detailed usage of the pseudo-class element ::after in the following chapters.

0 Comment

temp