float CSS –各种CSS属性之一

float css – one of various CSS properties

float CSS –各种CSS属性之一

Today I will tell you about CSS. This is will property called ‘float’. This property already in CSS since first version. And of course supporting of all possible browsers – Firefox, IE, Safari, Opera etc. By default, all basic HTML elements floating from left to right as possible. If the item reaches the end of the page (or the boundaries of its parent element), it goes lower – to next line. Of course, we can play with these rules via float css attribute. ‘float’ property has the following possible values:

今天，我将向您介绍CSS。 这就是将财产称为“ float”。 自第一个版本以来，此属性已经在CSS中。 当然也支持所有可能的浏览器-Firefox，IE，Safari，Opera等。默认情况下，所有基本HTML元素都尽可能从左向右浮动。 如果项目到达页面的末尾(或其父元素的边界)，则它会降低–移至下一行。 当然，我们可以通过float css属性使用这些规则。 'float'属性具有以下可能的值：

• none – default value. Mean that no special float riles will applied. Without floating.
  无-默认值。 意味着将不应用特殊的浮动规则。 没有浮动。
• left – element will floats to left side.
  left-元素将浮动到左侧。
• right – element will floats to right side
  right-元素将浮动到右侧
• inherit – element will take float value from its parent. This is rare using property, just because seems it not supported in IE.
  Inherit –元素将从其父级获取浮点值。 这是很少使用的属性，只是因为它似乎在IE中不受支持。

这是在CSS中使用float的一些示例 (Here are few samples of using float with css)

示例1 –我们将使用float值= left定位几个元素。 您也会在下面看到的示例代码 (Sample 1 – we will position several elements with float value = left. Sample code you will see below too)

Element 1

元素1

Element 2

元素2

Element 3

元素3

Element 4

元素4

Element 5

元素5

Element 6

元素6

Element 7

元素7

Element 8

元素8

Element 9

元素9

Element 10

元素10

div{
float:left;
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
}

div{
float:left;
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
}

<div class='left'>Element 1</div>
<div class='left'>Element 2</div>
<div class='left'>Element 3</div>
<div class='left'>Element 4</div>
<div class='left'>Element 5</div>
<div class='left'>Element 6</div>
<div class='left'>Element 7</div>
<div class='left'>Element 8</div>
<div class='left'>Element 9</div>
<div class='left'>Element 10</div>

<div class='left'>Element 1</div>
<div class='left'>Element 2</div>
<div class='left'>Element 3</div>
<div class='left'>Element 4</div>
<div class='left'>Element 5</div>
<div class='left'>Element 6</div>
<div class='left'>Element 7</div>
<div class='left'>Element 8</div>
<div class='left'>Element 9</div>
<div class='left'>Element 10</div>

示例2 –让浮动向右浮动 (Sample 2 – lets change float to right)

Element 1

元素1

Element 2

元素2

Element 3

元素3

Element 4

元素4

Element 5

元素5

Element 6

元素6

Element 7

元素7

Element 8

元素8

Element 9

元素9

Element 10

元素10

Interesting, isn`t it? all elements now floating to right, and if no room – drop to next line, again to right side.

有趣，不是吗？ 现在所有元素都向右浮动，如果没有空间，则移至下一行，再次移至右侧。

样本3 –无值 (Sample 3 – none value)

Element 1

元素1

Element 2

元素2

Element 3

元素3

Element 4

元素4

div{
float:none;
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
}

div{
float:none;
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
}

Yes, note few next rules: all other elements which follow after floating element will flow around it, and all elements which was before floating element will not be changed.

是的，请注意以下几条规则：在浮动元素之后的所有其他元素将在其周围流动，并且在浮动元素之前的所有其他元素将不会更改。

Also, quite forget, during playing with that float css property, you will noticing that all following elements will affected with this property too. It will looks like this:

另外，请记住，在使用该float css属性期间，您会注意到以下所有元素也会受此属性影响。 它看起来像这样：

Element 1

元素1

Element 2

元素2

Element 3

元素3

Element 4

元素4

Element 5

元素5

Element 6

元素6

Element 7

元素7

Element 8

元素8

Element 9

元素9

Element 10

元素10

Another (parent) block here (number 2)

此处的另一个(父)块(2号)

Not good, isn`t it? We expect that this block should appear after our first parent, but instead – its appear in wrong place and it mess layout.

不好，不是吗？ 我们希望该块应该出现在我们的第一个父项之后，而是-它出现在错误的位置并且布局混乱。

Full its code was:

完整的代码是：

#sample1{width:560px;
border:1px dashed #888;
margin:5px;
padding:5px
}
#sample1 div.left{
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
float:left
}

#sample1{width:560px;
border:1px dashed #888;
margin:5px;
padding:5px
}
#sample1 div.left{
width:80px;
height:50px;
border:1px dashed #DDD;
margin:5px;
float:left
}

<div id="sample1">
    <div class='left'>Element 1</div>
    <div class='left'>Element 2</div>
    <div class='left'>Element 3</div>
    <div class='left'>Element 4</div>
    <div class='left'>Element 5</div>
    <div class='left'>Element 6</div>
    <div class='left'>Element 7</div>
    <div class='left'>Element 8</div>
    <div class='left'>Element 9</div>
    <div class='left'>Element 10</div>
</div>
<div id="sample1">Another (parent) block here (number 2)
</div>

<div id="sample1">
    <div class='left'>Element 1</div>
    <div class='left'>Element 2</div>
    <div class='left'>Element 3</div>
    <div class='left'>Element 4</div>
    <div class='left'>Element 5</div>
    <div class='left'>Element 6</div>
    <div class='left'>Element 7</div>
    <div class='left'>Element 8</div>
    <div class='left'>Element 9</div>
    <div class='left'>Element 10</div>
</div>
<div id="sample1">Another (parent) block here (number 2)
</div>

So how we can fix this? – Easy, we will using ‘clear’ property. Here are fixed version:

那么我们该如何解决呢？ –简单，我们将使用“清除”属性。 这是固定版本：

Element 1

元素1

Element 2

元素2

Element 3

元素3

Element 4

元素4

Element 5

元素5

Element 6

元素6

Element 7

元素7

Element 8

元素8

Element 9

元素9

Element 10

元素10

Another (parent) block here (number 2)

此处的另一个(父)块(2号)

And its sources here:

及其来源：

<div id="sample1">
    <div class='left'>Element 1</div>
    <div class='left'>Element 2</div>
    <div class='left'>Element 3</div>
    <div class='left'>Element 4</div>
    <div class='left'>Element 5</div>
    <div class='left'>Element 6</div>
    <div class='left'>Element 7</div>
    <div class='left'>Element 8</div>
    <div class='left'>Element 9</div>
    <div class='left'>Element 10</div>
    <div style="clear:both"></div>
</div>
<div id="sample1">Another (parent) block here (number 2)
</div>

<div id="sample1">
    <div class='left'>Element 1</div>
    <div class='left'>Element 2</div>
    <div class='left'>Element 3</div>
    <div class='left'>Element 4</div>
    <div class='left'>Element 5</div>
    <div class='left'>Element 6</div>
    <div class='left'>Element 7</div>
    <div class='left'>Element 8</div>
    <div class='left'>Element 9</div>
    <div class='left'>Element 10</div>
    <div style="clear:both"></div>
</div>
<div id="sample1">Another (parent) block here (number 2)
</div>

结论 (Conclusion)

I hope that our new article was very useful for your projects. Good luck!

我希望我们的新文章对您的项目非常有用。 祝好运！

翻译自: https://www.script-tutorials.com/float-css/