关于float浮动的通俗理解

62 阅读 0 评论 41 点赞

我是靠谱客的博主迷你铃铛，最近开发中收集的这篇文章主要介绍关于float浮动的通俗理解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

folat浮动是我在学习CSS过程中碰到的另一个比较难以理解的问题，希望我的理解能够对大家有所帮助。

float浮动涉及到了一个文档流的问题，所谓的文档流就是在body里面写的块元素的位置，写在上面的就先显示，后面的依次显示。如果碰到是块元素，每个块元素单独占一行，不用特殊的手段他们是不会愿意和别人同行的；而内联元素就不一样了，内联元素们喜欢挤在一起，先将一行占满，再换行。不太理解的可以看看下面的例子

1.普通的文档流定位

<div class="position" style="width:300px;
border:4px solid #f63;margin-bottom:20px;">
<div
style=" height:50px;
width:100px;background-color: yellow;">1
</div>
<div
style=" height:50px;
width:100px;background-color: bisque;">2
</div>
<div
style=" height:50px;
width:100px;background-color: lightblue;">3
</div>
<span >我是内联元素。</span>
<span >我是内联元素。</span>
<span >我是内联元素。</span>
<span >我是内联元素。</span>
<span >我是内联元素。</span>
</div>

div是块元素，所以每个div都单独占领一行，按照编写的顺序进行排列；span是内联元素，所以会先排满一行再换行。那如果想要块元素也能像内联元素一样排满一行呢，这就要用到我们的float浮动了，可以用逼迫的手段让它违背自己的原则。

2.右浮动

只有1右浮动时

<div class="position" style="width:300px;
border:4px solid black;margin-bottom:20px;">
<div
style=" height:50px;
width:100px;background-color: mediumspringgreen; float: right;">1
</div>
<div
style=" height:50px;
width:100px;background-color: bisque;">2
</div>
<div
style=" height:50px;
width:100px;background-color: lightblue;">3
</div>
</div>

从上图可以看出，第一个元素被设置为靠右浮动，此时这个命令破坏了正常的文档流，也就是本来1的位子被2占领了，后面的元素依旧按照原来的规则进行排列，只有1是脱离了文档流的。

我把1的高度设置得小一点，2的宽度大一点，这样看起来更加明显，2仿佛忽略的1的存在，直接占据了1的位子，而且1浮动在2的表面时会将2遮住，这也就是脱离了正常的文档流的意思。

1，2右浮动

将1，2都设置成右浮动时，3就会占领他们原来的位子。

1，2，3右浮动

如果位置足够，123应该排在同一行，但是由于除了父元素，其他元素都设置了右浮动，即其他元素都脱离了文档流，只有父元素会按照原来没有设置时的样子放置，子元素也不能将父元素撑开，因为父元素会忽略他们，当他们不存在

但位置不够时，3就会被挤到下一行，还是会靠右边放置，如下图。

3.左浮动

左浮动和右浮动其实差不多，只要掌握了基本原理就可以理解了，即float定位的核心是，进行定位的元素会脱离文档流，被其他的元素忽略。

4.消除浮动

接下来介绍一下float定位的死党，clear属性，clear专门和float对着干。

<div class="position" style="width:300px;
border:4px solid black;margin-bottom:20px;">
<div
style=" height:50px;
width:100px;background-color: mediumspringgreen;float: right;">1
</div>
<div
style=" height:50px;
width:100px;background-color: bisque;float: right; ">2
</div>
<div
style=" height:50px;
width:100px;background-color: lightblue;clear: right;">3
</div>
</div>

给1，2都设置右浮动，3不设置任何浮动时，在3 上用消除右浮动时，会出现以下结果：