CSS flexible floating layout application

In fact, the original name of the article was "What should I do if I encounter a project that does not support flex?"

Now it's almost the world of flex, simple and flexible, but sometimes it is inevitable that you will come into contact with IE browser, such as I recently contacted the writer's area (qq.com) , this needs to be compatible with IE9, which is natural Can't use flex layout anymore. What can I do if I can’t use flex (the project is so XX, it will be compatible with IE )? That can only return to the traditional layout, which is the floating layout.

Floating float can be said to be one of the most flexible layouts in CSS layout. Don't underestimate float. Some layouts can only be realized by float. Here are a few common layouts, let’s take a look

1. Text wrapping layout

This type of layout should be the original intention of floating, such as this

Just set a left float, the implementation is as follows

<div>
  <strong class="float">浮</strong>
  <p>动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p>
</div>

.float{
  float: left;
  /*其他样式*/
}

The complete code can be accessed float-layout (codepen.io)

It should be noted that the floating element must be placed in front of the text (HTML structure), if placed behind the text

<div>
  <p>动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p>
  <strong class="float">浮</strong>
</div>

Then it will become like this

In other words, the of influence of 160c825d22c5e9 floating is determined by the structure of the floating element in the HTML , which is very important

However, this kind of wrapping layout is rarely seen now, but sometimes this idea is quite useful. For example, in this article CSS implements multi-line text "expand and collapse" (juejin.cn) , which is used inside When it comes to the floating feature, the effect of text wrapping in the lower right corner is realized. If you are interested, you can take a look

Two, two-column layout

The feature of the two-column layout is that the left side is a fixed size, and the right side automatically fills up the remaining space, for example

The structure is as follows

<div class="crad">
  <img class="head" src="xxx.jpg">
  <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p>
</div>

The floating implementation is as follows, mainly because the text needs to be set overflow: hidden . I won’t talk about the implementation principle here ( BFC ). Those who are interested can check out this article CSS for in-depth understanding of fluid characteristics and multi-column adaptive layout under BFC characteristics

.head{
  float: left;
}
.info{
  overflow: hidden;
}

If the right side is a fixed size, such as this

How to deal with this situation? Many people may think of right floating, yes, but note that HTML structure does not need to be changed , that is, the floating element is still in front of the text

.head{
  float: right;
}

Notably, if desired spacing provided two columns margin , needs to be provided floating elements on

.head{
  float: left;
  margin-right: 8px;
}

The complete code can be accessed float-2-cols

Three, three-column layout

The characteristic of the three-column layout is that the left and right are fixed sizes, and the remaining space is automatically filled in the middle, such as

The structure is as follows

<div>
  <img class="head" src="xxx.jpg">
  <div class="right">编辑</div><!--注意是在文本的前面-->
  <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。</p>
</div>

Note that the button on the right is still in front of the text in the HTML structure, just set the right float

.head{
  float: left;
}
.info{
  overflow: hidden;
}
.right{
  float: right;
  margin-left: 8px;
  /*其他样式*/
}

The complete code can be accessed float-3-cols (codepen.io)

Fourth, the text is omitted to follow the layout

There is also a more common but a bit tricky layout, this is it

1. When there is a lot of text, beyond hiding, the label text is on the far right
2. When there is less text, the label text follows the text

The schematic is as follows

How to use float implementation here? Observe carefully, it is actually a two-column layout

<div class="card">
    <div class="right">编辑</div>
  <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</p>
</div>

.info{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Obviously now that the label text is always on the right, how to achieve the effect of label text following? In fact, you can nest a container with a maximum width of 100%

<div class="card">
  <div class="wrap"> <!--添加一个最大宽度为100%的容器-->
        <div class="right">标签</div>
        <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</p>
  </div>
</div>

.wrap{
  display: inline-block;
  max-width: 100%;
}

The complete code can be accessed float-auto-text (codepen.io)

If compatibility is not considered, width: fit-content would be a better choice. The container can maintain block , and the width is determined by the text content. For details, please refer to this article: Understanding CSS3 max/min -content and fit-content and other width values

.wrap{
  /*display: inline-block;*/
  max-width: 100%;
  width: fit-content;
}

In addition, if multi-line text is not applicable, it can be implemented in another way. For detailed principles, please refer to this article CSS Implementation of Multi-line Text "Expand and Collapse" (juejin.cn)

The complete code can be accessed float-mul-tags (codepen.io)

Five, other expansion layout

This part is equivalent to the above expansion, let's look at a case.

Sometimes there will be a date behind the label, which will always be on the far right. The effect is as follows

Some people may think of absolute positioning, but the date here may not be fixed, and adaptive width is required. How to achieve it? In fact, it is a combination of two layouts

Therefore, you need to add another layer of container to achieve the following

<div class="card">
    <span class="date">6-14</span>
    <div class="outer-wrap"> <!--新加一层容器-->
        <div class="wrap">
            <div class="right">
                <button class="btn">标签</button>
            </div>
            <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</p>
    </div>
  </div>
</div>

Here is how to write the two-column layout

.date{
  float: right;
}
.outer-wrap{
  overflow: hidden;
}

Tip: If you use the fit-content method, you can omit the .outer-wrap layer of container

The real-time effect is as follows

The complete code can be accessed float-auto-text-fixed (codepen.io)

Six, summary and explanation

The above introduced several common cases of floating layout, I believe it can be applied to most layouts, of course, it is not recommended that you must use floating layout, and sometimes the layout is confusing (HTML structure and visual inconsistency), and the implementation is verbose (nesting level) Many) and so on, but it is still very useful in browsers that are not compatible with flex layout (lower than IE10), and there are even layouts (text wrapping) that can only be achieved by floating. Here is summarized as follows

1. Realize adaptive flexible layout through BFC, float + overflow
2. The scope of influence of floating is determined by the structure of floating elements in HTML
3. Realize the text following effect by setting the maximum width (fit-content is also possible)
4. Other layouts can be combined with each other to achieve
5. In addition, these float implementations are fully compatible (IE6+), so you can use it with confidence

With the gradual retreat of IE, some layouts will gradually fade out, just like the table layout in the early years. But the floating layout has been developing with new features. For example, Shapes layout needs floating support. In addition, the floating layout is slowly supporting logical attributes, such as float: inline-start . Finally, the most important thing about CSS is flexibility, and it’s always right to have one more idea. If you think it's not bad, if it is helpful to you, please like, bookmark, and forward ❤❤❤