The original title of the article is “What Happens to a Project that doesn’t support Flex?”

Now flex is almost the world, simple and flexible, but sometimes it is inevitable to come into contact with IE browser, such as MY recent contact with qq.com, this is compatible with IE9, also naturally can not use Flex layout. What if I can’t use Flex? We’ll have to go back to traditional layouts, which are floating layouts.

Floating floats are one of the most flexible layouts in THE CSS. Do not underestimate floating. Some layouts can only be implemented by floating. Here are some common layouts to take a look at

1. Text surround layout

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

Set a left float, as follows

<div>
  <strong class="float">floating</strong>
  <p>The dynamic attribute specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid.</p>
</div>
Copy the code
.float{
  float: left;
  /* Other styles */
}
Copy the code

Full code accessible to float-layout (codepen.io)

Note that the floating element must precede the text (HTML structure), if placed after the text

<div>
  <p>The dynamic attribute specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid.</p>
  <strong class="float">floating</strong>
</div>
Copy the code

So it’s going to look like this

That said, it is important that the scope of influence of a float is determined by the structure of the float element in HTML

However, now rarely see this kind of surround layout, but sometimes this idea is quite useful, such as in this article CSS implementation of multi-line text “expand and fold” (juejin. Cn), which uses the floating feature, to achieve the bottom right corner of the text surround effect, interested can see

Two, two column layout

The two-column layout features a fixed size on the left and an automatic filling of the remaining space on the right, for example

Structure is as follows

<div class="crad">
  <img class="head" src="xxx.jpg">
  <p class="info">The float property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid.</p>
</div>
Copy the code

Float as follows, mainly text needs to set overflow: hidden. Without talking about implementation principles (BFC), check out this article if you are interested in a deeper understanding of fluid properties and multi-column adaptive layout with CSS

.head{
  float: left;
}
.info{
  overflow: hidden;
}
Copy the code

If the right-hand side is a fixed size, like this

How to deal with this situation? A lot of people might think right float, yes, but notice that the HTML structure doesn’t need to change, meaning that the float element still precedes the text

.head{
  float: right;
}
Copy the code

Note that if you need to set a margin of two columns, you need to set it on the float element

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

The full code is accessible to float-2-cols

Three, three column layout

The three-column layout features fixed dimensions on the left and right, with the middle automatically filling the remaining space, for example

Structure is as follows

<div>
  <img class="head" src="xxx.jpg">
  <div class="right">The editor</div><! -- Notice before the text -->
  <p class="info">The float property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid.</p>
</div>
Copy the code

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

.head{
  float: left;
}
.info{
  overflow: hidden;
}
.right{
  float: right;
  margin-left: 8px;
  /* Other styles */
}
Copy the code

Full code to access float-3-cols (codepen.io)

4. Text omission follows layout

Another more common but tricky type of layout is this

  1. When there is a lot of text, beyond hiding, the label text is at the far right
  2. When the text is small, the tag text follows the text

Indicated as follows

How do you use a float implementation here? If you look closely, it’s actually a two-column layout

<div class="card">
	<div class="right">The editor</div>
  <p class="info">The float property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid. Pan until you hit the border of the container, or another floating element.</p>
</div>
Copy the code
.info{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
Copy the code

It’s obvious that the tag text is always on the right, so how do you make the tag text follow? You can actually nest a container with a maximum width of 100%

<div class="card">
  <div class="wrap"> <! Add a container with a maximum width of 100% -->
    <div class="right">The label</div>
    <p class="info">The float property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid. Pan until you hit the border of the container, or another floating element.</p>
  </div>
</div>
Copy the code
.wrap{
  display: inline-block;
  max-width: 100%;
}
Copy the code

Full code access float-auto-text (codepen.io)

If compatibility is not considered, width: fit-content is a better choice to keep the block properties of the container, and the width is determined by the text content. For details, see this article: Understanding CSS3 Max /min-content and fit-Content

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

In addition, if multi-line text is not applicable, you can use another way to implement, detailed principle can be seen in this article CSS implementation multi-line text “expand and fold” (juejin. Cn)

Full code accessible to float-mul-tags (codepen.io)

5. Other extension layouts

This section is an extension of the above combination, so let’s look at an example.

Sometimes the label will be followed by a date, which will always be on the far right, so it looks like this

One might think of absolute positioning, but here the date might not be fixed and you need an adaptive width, so how do you do that? It’s just a combination of these two layouts

So you need to add another layer of containers, as follows

<div class="card">
  <span class="date">6-14</span>
  <div class="outer-wrap"> <! Add a new layer of container -->
    <div class="wrap">
      <div class="right">
    	 <button class="btn">The label</button>
      </div>
      <p class="info">The float property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid. Pan until you hit the border of the container, or another floating element.</p>
    </div>
  </div>
</div>
Copy the code

Here is a two-column layout

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

Tip: If you use fit-content, you can leave out the.outer-wrap layer

The real-time effects are as follows

Float auto-text-fixed (codepen.io) float auto-text-fixed (codepen.io)

Summary and explanation

Floating layout is not recommended, of course, you must use the floating layout, and even sometimes the layout is chaotic (HTML structure and visual inconsistency), verbose (nesting level), etc. But it’s useful in browsers that don’t have flex layout compatibility (lower than IE10), and even layouts that can only be implemented using floats (text wrap). So here’s the summary

  1. Adaptive elastic layout with BFC, float + Overflow
  2. The impact of a float is determined by the structure of the float element in HTML
  3. Text following effect by setting maximum width (fit-content also works)
  4. Other layouts can be combined to achieve this
  5. In addition, these float implementations are fully compatible (IE6+) and can be used with confidence

With the gradual receding of IE, some layouts will slowly fade out, just like the table layout in the early years. But floating layouts are evolving with new features such as Shapes that require floating support and logical properties such as float: inline-start. In the end, CSS is all about flexibility, and it’s always good to have another way of thinking. If you think it’s good and helpful, please like, bookmark and retweet ❤❤❤