The float property is one of the most commonly used CSS properties in the CSS. The float property is easy to use, with the values left, right, and None, but do you really understand it?

Here I will introduce my understanding and use of float, as well as the problems encountered in using float.

Introduction to float

1. Float elements have BFC model properties

When you add a float attribute to an element, it has the effect of a BFC model. For example, after adding a float attribute to an inline element such as SPAN, it can also set a width, height and margin.

2. The float and the position

When you add absolute or fixed to an element, the float effect disappears, even if the float property is set after the position property.

3. Deviate from the standard document flow

Floating elements can be separated from the standard document flow and affect the sibling elements that follow them. To understand the effect on sibling elements, add clear: both to the immediate sibling element, but the margin of the immediate sibling element is still relative to the parent element.

4. Destroy the parent height

When the parent element has no height and is not a BFC model, adding a floating effect to the child element will cause the height of the parent element to collapse.

There are many ways to eliminate the effects of floating on the parent element, the most straightforward is to change the parent element into a BFC model element.

However, the most commonly used method should be to add a.clearfix class, but there are many ways to write this class, and I generally use zhang Xinxu’s method, the least amount of code:

.clearfix {
    zoom: 1;
}
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}Copy the code

5. Float and padding

The float element cannot exceed the padding of the parent element.

Using points 5 and 3, we can easily achieve some layout effects and reduce the level of nesting.

For example, we usually encounter the following style layout:

Code implementation:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8" /> <title> Float </title> </head> <body> <div class="container"> <p class="tt">1. </p> <button class=" BTN "> Delete </button> <div class="con">Copy the code
.container {
  width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
}
.tt {
  float: left;
  margin: 0;
  width: 200px;
  overflow: hidden;
}
.btn {
  float: right;
}
.con {
  padding-top: 10px;
  clear: both;
}Copy the code

The title bar has both text and delete buttons, we use float directly, and the following content section we use clear: both; To get the display positioned correctly. The spacing between the title bar section and the content section is controlled by adding padding instead of margin to the.con element because its margin is relative to the parent container.

6. Float and margin

Two adjacent floating elements, when the width of the first floating element is 100%, the second floating element is squeezed below, and can be brought back to the first row by adding a negative margin-left or margin-right value (absolute value at least equal to its own width).

Common layout

Using this, we can also implement many layouts, such as:

When writing HTML code, we tend to write from left to right according to the UI style, but sometimes the right side is more important, so its HTML structure needs to be placed on top of the left side to make it load earlier.

<div class="comment"> <! <div class="content"> <div class="author"> <span class="name"> <span > <span Class ="date">2016-78-55</span> </div> <p class=" text-align "> Eat again much also do not grow fat, good worry person, how can fast grow fat, on line, urgent! Eat again much also do not grow fat, good worry person, how can fast grow fat, on line, urgent! Eat again much also do not grow fat, good worry person, how can fast grow fat, on line, urgent! Eat again much also do not grow fat, good worry person, how can fast grow fat, on line, urgent! Eat again much also do not grow fat, good worry person, how can fast grow fat, on line, urgent! Eat again much also do not grow fat, good worry person, how can fast grow fat, on line, urgent! < / p > < div class = "meta" > < span class = "MSG - tag" > good < / span > < span class = "MSG - tag" > return < / span > < / div > < / div > <! - on the left side of the content - > < a href = "#" class = "avatar" > < img SRC = "images/header. JPG" Alt = "image" > < / a > < / div >Copy the code
* {margin:0; padding:0; } li {list-style: none; } a {text-decoration: none; Font-family: 'Microsoft yahei '; } .wrap { width: 800px; margin: 50px auto; } .content { float: right; margin-left: 100px; } .date { font-size: 14px; color: #666; } .text { margin: 20px 0; } .avatar { float: left; margin-right: -80px; } .avatar img { width: 80px; height: 80px; border-radius: 50%; }Copy the code

Even though the.content element is to the right of the.avatar element on the UI, we still need to place the.content element before the.avatar element in the HTML structure. This can be done by setting the.content element to float right. Then set the left float to the.avatar element and add a negative margin-right value to bring it back up.

2. Fixed-width flow layout on the right

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div class="content"> <div class="box1"> <div class="inner"></div> </div> <div class="box2"></div> </div> </body> </html>Copy the code
.content {
  width: 500px;
  overflow: hidden;
}
.box1 {
  box-sizing: border-box;
  float: left;
  width: 100%;
  height: 50px;
  padding-right: 220px;
  border: 1px solid #ccc;
}
.inner {
  width: 100%;
  height: 40px;
  border: 1px solid #f23;
}
.box2 {
  float: right;
  width: 200px;
  height: 30px;
  margin-left: -100%;
  border: 1px solid #2fe;
}Copy the code