css float属性

Floating has been a very important topic in the past.

过去，浮动是一个非常重要的话题。

It was used in lots of hacks and creative usages because it was one of the few ways, along with tables, we could really implement some layouts. In the past we used to float the sidebar to the left, for example, to show it on the left side of the screen and added some margin to the main content.

它被用于许多技巧和创意用途，因为它是表格和我们可以真正实现某些布局的少数几种方法之一。 过去，我们曾经将边栏浮动到左侧，例如，将其显示在屏幕的左侧，并在主要内容上添加了一些边距。

Luckily times have changed and today we have Flexbox and Grid to help us with layout, and float has gone back to its original scope: placing content on one side of the container element, and make its siblings show up around it.

幸运的是，时代已经改变，如今我们有了Flexbox和Grid来帮助我们进行布局，而float已回到其原始范围：将内容放置在容器元素的一侧，并使它的同级元素显示在容器元素周围。

The float property supports 3 values:

float属性支持3个值：

• left

  left

• right

  right

• none (the default)

  none (默认)

Say we have a box which contains a paragraph with some text, and the paragraph also contains an image.

假设我们有一个框，其中包含带有一些文本的段落，并且该段落还包含图像。

Here’s some code:

这是一些代码：

     
  
      
    
       
      
        
This is some random paragraph and an image.  The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.      
    
       
  
      
     

.parent {  background-color: #af47ff;  padding: 30px;  width: 500px;}.child {  background-color: #ff4797;  padding: 30px;}.box {  background-color: #f3ff47;  padding: 30px;  border: 2px solid #333;  border-style: dotted;  font-family: courier;  text-align: justify;  font-size: 1rem;}

and the visual appearance:

和视觉外观：

As you can see, the normal flow by default considers the image inline, and makes space for it in the line itself.

如您所见，默认情况下，正常流程会考虑图像内联，并在行本身中为其留出空间。

If we add float: left to the image, and some padding:

如果我们在图片上添加float: left并添加一些填充：

img {  float: left;  padding: 20px 20px 0px 0px;}

this is the result:

结果是：

and this is what we get by applying a float: right, adjusting the padding accordingly:

这就是我们通过应用float来得到的：正确，相应地调整填充：

img {  float: right;  padding: 20px 0px 20px 20px;}

A floated element is removed from the normal flow of the page, and the other content flows around it.

从页面的常规流中删除浮动元素，其他内容在页面周围流动。

You are not limited to floating images, too. Here we switch the image with a span element:

您也不仅限于浮动图像。 在这里，我们使用span元素切换图像：

     
  
      
    
       
      
        
This is some random paragraph and an image. Some text to float The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.      
    
       
  
      
     

span {  float: right;  margin: 20px 0px 20px 20px;  padding: 10px;  border: 1px solid black}

and this is the result:

结果如下：

清算 (Clearing)

What happens when you float more than one element?

当您浮动多个元素时会发生什么？

If when floated they find another floated image, by default they are stacked up one next to the other, horizontally. Until there is no room, and they will start being stacked on a new line.

如果在浮动时找到另一个浮动图像，则默认情况下它们会水平堆叠在一起。 直到没有空间，它们都将开始堆叠在新的行上。

Say we had 3 inline images inside a p tag:

假设我们在p标签中包含3个内联图片：

If we add float: left to those images:

如果我们将float: left在这些图像上：

img {  float: left;  padding: 20px 20px 0px 0px;}

this is what we’ll have:

这是我们将拥有的：

if you add clear: left to images, those are going to be stacked vertically rather than horizontally:

如果您添加clear: left在图像上，则将垂直堆叠而不是水平堆叠：

I used the left value for clear. It allows

我用left值表示clear 。 它允许

• left to clear left floats

  left以清除左浮动

• right to clear right floats

  right清除右浮动

• both to clear both left and right floats

  both可以清除左右浮动

• none (default) disables clearing

  none (默认)禁用清除

翻译自:

css float属性