资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/浮动(Float)

浮动(Float)

张金宝 / 760人阅读

摘要：右浮动盒也有类似的规则与兄弟不能重叠一个浮动盒的外不能高于其包含块的。当浮动盒出现在两个合并的之间时，浮动盒的定位就像它有一个空的匿名块父级存在于当前流一样。

浮动的原始意义

在绝大多数Web开发者的语境中，“布局”这个术语和“排版”是有差异的。“布局”偏向于指宏观的GUI区域划分，比如双栏布局或三栏布局等。从这一点出发，float其实本不是一项用于“布局”的属性。float对应的其实是传统印刷排版中图文混排中的环绕。

在 CSS 中，用 float 和 position 的区别是什么？

浮动的特性 float与block

常见元素inline,inline-block,table-cell等等设置float属性,都被视为块级元素,相当于display设置为block

Specified value Computed value
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
其它 与指定值相同
float与包裹性 
如果margin-left或者margin-right的计算值为auto，它们的应用值为0


对于非替换元素,如果width的计算值为auto，应用值为“自适应（shrink-to-fit）”宽度


自适应宽度的计算与用自动表格布局算法去算一个表格单元的宽度类似。粗略地讲：通过格式化不含除显式换行外的换行来计算首选宽度（preferred width），然后计算首选最小宽度（preferred minimum width），例如，通过尝试所有可能的换行。CSS 2.1没有定义准确的算法。第三步，算出可用宽度（available width）：这种情况下，就是包含块的宽度减去margin-left，border-left-width，padding-left，padding-right，border-right-width，margin-right和所有相关滚动条的宽度的应用值


那么自适应宽度就是：min(max(首选最小宽度, 可用宽度), 首选宽度)


对于替换元素,width的应用值由行内的可替换元素决定

我们说的包裹性,主要就是指自适应宽度,通常情况下也就是首选宽度

特定情况下（例如，见上面的10.6.4节和10.6.6节），一个建立了块格式化上下文的元素的高度按照如下规则计算：


如果它只含有行内级子级，高度就是最高的行盒的top与最低的行盒的bottom之间的距离


如果它只含有块级子级，高度由就是最高的块级子级盒的top margin-edge到最低的块级子级盒的bottom margin-edge之间的距离


此外，如果该元素含有任意bottom margin边位于元素的content边下方的的浮动后代，那么高度增加至能够包含这些边。只考虑参与此块级格式化上下文的浮动，例如，不考虑绝对定位的后代中的浮动或者其它浮动

float包裹性展示

float与兄弟元素 
浮动 在浮动模型中，一个盒先根据常规流布局，然后从流中取出来尽可能地左移或右移。其它内容可能会沿着浮动（盒）的一侧排列（Content may flow along the side of a float）


一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐


因为浮动（盒）不在流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间


浮动（盒）的内容会堆叠起来，就像浮动（盒）生成了新的层叠上下文（stacking contexts）一样，除了所有定位的元素和实际创建了新的层叠上下文并参与了浮动（盒）的父级堆叠上下文的元素。一个浮动（盒）可以与常规流中的其它盒重叠（例如，当一个常规流盒接着一个有负margin的浮动（盒）时），出现这种情况时，浮动（盒）会被渲染在未定位的（non-positioned）流内块之前，流内行内（盒）之后

float虽然使元素脱离了文档流,但是它仍然占据着位置,这也是影响外部元素宽度计算的原因之一

float盒的兄弟块盒会竖直排列,当作float盒不存在,而兄弟行内盒会缩进,给float让出空间

对于float盒,如果它与常规流中的其它盒重叠,那么它会覆盖流内块,并且被流内行内盒覆盖

float与图文混排

一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）

一个左浮动盒的left外边（outer edge）不能位于其包含块的left边的左边。向右浮动的元素也有类似的规则
float与左右边界

如果当前盒是向左浮动的，并且在这之前源文档中还有元素生成了左浮动盒，那么对于每一个之前的盒，要么 当前盒的left外边在之前的盒的right外边的右边，要么它的top要比之前的盒的bottom低。右浮动盒也有类似的规则
float与兄弟float排列

一个左浮动盒的right外边不能位于接着它的任意右浮动盒的left外边的右边。右浮动盒也有类似的规则
float与兄弟float不能重叠

一个浮动盒的外top（outer top）不能高于其包含块的top。当浮动（盒）出现在两个合并的margin之间时，浮动（盒）的定位就像它有一个空的匿名块父级存在于（当前）流一样。这个父级的位置通过margin合并章节中的规则来定义
float与margin

一个浮动盒的外top不能高于源文档中任何在此之前的元素生成的块盒或者浮动盒的外top
float与块盒,浮动盒

一个元素的浮动盒的外top不能高于任何含有源文档中在此之前的元素生成的盒的行盒的top
float与行盒

左边存在另一个左浮动盒的左浮动盒的right外边不能位于其包含块的right边的右边（不严谨的：一个左浮动盒不能超出right边，除非它已经尽量向左（紧挨着包含块的left边）了）。右浮动元素也有类似的规则
多个float与包含块边界

浮动盒必须尽量高往高放（A floating box must be placed as high as possible）

左浮动盒必须尽量往左放，右浮动盒尽量往右放。更高的位置要比更左/右的位置优先
float与高度

所以,float自身的主要原则是:浮动元素之间不重叠；尽可能向边缘漂浮，但不越界。

float与父元素 
当overflow计算值为visible时常规流中的块级不可替换元素


只考虑常规流中的子级（即，浮动盒和绝对定位的盒会被忽略，并且相对定位的盒不考虑其偏移）。注意子级盒可以是一个匿名块盒

这就是float元素的父元素塌陷的原因

float与父元素塌陷

那么,float在父元素的兄弟元素上会不会起作用呢

float与父元素的非浮动,浮动兄弟元素

这些规则里涉及的其它元素仅仅是指与浮动（盒）处于同一个块格式化上下文的其它元素

由于父元素跟它的兄弟元素同出于一个BFC中,所以行为规则与同处于同一个父元素之中的元素的规则相同：块级元素重叠；行内元素环绕；浮动元素跟随。

clear与闭合浮动 
该属性说明了一个元素的盒的哪一边不能与之前的浮动盒相邻。"clear"属性不考虑元素自身的或者其它块格式化上下文中的浮动

为了解决上面的父元素高度塌陷以及父元素的兄弟元素受到子元素float影响的问题,我们需要闭合浮动

.clearfix:before,
.clearfix:after
{
  display: table;
  content: " ";
}
.clearfix:after
{
  clear: both;
}
.clearfix{*zoom:1;} //ie 6 7

before是因为table类型能生成独立的bfc，防止上边距塌陷，

after负责清除浮动，防止父级高度塌陷；配合使用，代码少，效率高。

想要具体了解,请看一丝大大的那些年我们一起清除过的浮动,这里就不详细写了

回归CSS标准之Float

云服务器 GPU云服务器 float float:left float:right float类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111981.html

相关文章

  • CSS基础入门之float

    摘要：在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。 前几天有小伙伴说对float的学习云里雾里的，下面我就给大家说一下关于float的一些问题。 在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到...

    xinhaip 评论0 收藏0

  • 深入理解css之float

    摘要：破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。 前言 在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。但是有很多情况，正常流是没办法实现的，因此我们需要一些手段来破坏流，从而实现一些特殊的布局，而本节的主角float就具备破坏流...

    Nekron 评论0 收藏0

  • CSS Float nine rules

    注：本文是对众多博客的学习和总结，可能存在理解错误。请带着怀疑的眼光，同时如果有错误希望能指出。如果你喜欢我的文章，可以关注我的私人博客:http://blog-qeesung.rhcloud.com/ 入门前端也算是有三个月之久了，发现Float这个属性一直都很迷惑，只是知道一些简单的浮动规则，并没有深入去学习，一旦遇到一点复杂的浮动场景，自己也就懵了。 于是在网上找了数篇关于浮动的博客文章，加...

    bingo 评论0 收藏0

  • CSS Float nine rules

    注：本文是对众多博客的学习和总结，可能存在理解错误。请带着怀疑的眼光，同时如果有错误希望能指出。如果你喜欢我的文章，可以关注我的私人博客:http://blog-qeesung.rhcloud.com/ 入门前端也算是有三个月之久了，发现Float这个属性一直都很迷惑，只是知道一些简单的浮动规则，并没有深入去学习，一旦遇到一点复杂的浮动场景，自己也就懵了。 于是在网上找了数篇关于浮动的博客文章，加...

    Nino 评论0 收藏0

发表评论

登陆后可评论

0条评论

张金宝

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<