摘要：浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS 浮动属性css中，我们使用float来实现浮动，使用方法如下：
img{
float:right;
}
float属性值有以下几种：
left：元素向左浮动
right：元素向右浮动
none：默认值。元素不浮动，并会显示在其文本出现的位置
inherit：从父元素继承float属性
所有的主浏览器都支持float，但是IE均不支持"inherit"
CSS浮动情形下面介绍浮动的使用情形及问题：
如下图所示，当把框1向右浮动时，它脱离文档流向右移动，直到它的右边框碰到包含框
浮动意味着脱离文档流，可能会引发一系列的问题，比如，将上图的框1移向左边，那么框1在文档中相当于没有，框2，框3上移，表现出来就是框2消失不见
如果想要解决这个问题的话，可以三个框同时左移，就不会有覆盖的情况，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
同时移动也带来一些问题，如果包含框太窄，没办法容纳三个框，这个时候该怎么办?
这个时候浮动块就会进行调节，如下图所示，第三个框会自动向下浮动，直到有足够的空间，如果浮动过程中发现有浮动框高度不一致，则会被卡住
浮动清理由上我们可以看出，浮动会影响后面的元素，那怎么清理浮动呢，现总结以下几个方法：
使用带clear的空<div>标签在浮动元素后添加一个空元素，如
,然后在css中添加.clear{clear:both}即可。或者是这是最为常用的一种办法，兼容所有主流浏览器,但这种办法使用了大量的无用标签，不推荐
使用::after伪元素利用浮动元素的容器的::after伪元素来清楚浮动，由于::after伪元素只对块级元素有用，因此要设置display:block，通过::after伪元素在浮动结束之后，向其中添加看不见的空格“20”或者是点".",我们也可以使用 content:""
需要注意的是IE6，IE7不支持after伪元素，因此要添加.clearfix{zoom:1}；来触发haslayout，或者你可以把它写到IE6、7的CSS hacker文件里，这样不会影响W3C标准验证
使用邻接元素清除直接给浮动元素的下一个元素添加一个clear：both；但是要注意一点，必须保证这个元素和浮动元素是在一层container中，如果在浮动元素的下一层的话，还是老老实实用::after伪元素吧
使用overflow属性给浮动元素的容器添加overflow:hidden；(overflow:auto)。
这个办法很有意思啊，我们知道，在使用float之后，元素会调到容器上层，但是使用overflow:hidden；之后，浮动元素又回到了容器中，把容器高度撑起，达到了清理浮动的作用（详解见图）
给浮动元素的容器也添加上浮动属性即可清理内部浮动。同overflow法一样无须添加额外的class，使用方便但是会对下面的文档造成影响。
这种做法属于一时爽的类型，因为给容器设置浮动之后，对后面的布局也产生影响，不建议使用
使用display:table采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素。当容器被设置成了table或table-cell时，同时也创建了css2规定的block formatting contexts，这样父容器就包含了元素的高度
为什么我把它放在这么后面呢，因为，兼容性问题又来了。。display:talbe 系列样式设定不在 IE6/7 的支持范围之内
触发 hasLayout 清除为了解决杀千刀的IE，特地来解决一下,首先，我们了解一下IE里的layout：
"layout"是IE的专有概念，它决定了元素如何对其内容进行定位和计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响
"Layout" 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。
"Layout" 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。
"Layout" 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小， 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 "hasLayout" 属性，属性值可以为 true 或 false。 当一个元素的 "hasLayout" 属性值为 true 时，我们说这个元素有一个布局（layout），或拥有布局。
看到这儿我们就很清楚了嘛，触发一下layout就可以清楚浮动了嘛，所以我们可以对容器用以下几种姿势来清除浮动
haslayout-clear-float:{width:1px}
或
.haslayout-clear-float:{height:1px}
或
.haslayout-clear-float:{zoom:1}
可触发 hasLayout 的 CSS 特性有以下几种：
display: inline-block;
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute;
writing-mode: tb-rl;
zoom: (除 normal 外任意值)
注意：layout属性只有IE有，并且IE6以前的版本任何的height和width都会触发layout属性，可以依靠计算布局清理浮动的 haslayout 特性仅在 IE 6/7 中存在，IE8 之后将使用 CSS 2.1 的 Block Formatting Contexts 定义来达到同样效果。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111046.html
摘要：生成相对定位的元素，相对于元素本身正常位置进行定位。元素的位置通过以及属性进行规定。因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过属性控制叠放顺序，越高，元素位置越靠上。页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Maste...
摘要：为什么要清除浮动影响其他元素定位父盒子高度为，子盒子全部浮动定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。清除浮动方法总结对父级元素设置高度对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置高度设置为内容高度。 为什么要清除浮动？ 1、影响其他元素定位父盒子高度为0，子盒子全部浮动、定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。 2.背景图片或颜...
摘要：不会重叠浮动元素可以包含浮动我们可以利用的第三条特性来清浮动，这里其实说清浮动已经不再合适，应该说包含浮动。总而言之清理浮动两种方式利用属性，清除浮动使父容器形成 CSS清浮动处理（Clear与BFC）在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼 1 浮动带来布局的便利，却也带来了新问题 复制代码 1 2 3 4 ...
摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。 作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。 本文主要讨论以下几个问题：1.浮动的原始用途...
阅读 2854·2021-11-19 09:40
阅读 3461·2021-10-09 09:43
阅读 2649·2021-09-22 15:31
阅读 1702·2021-07-30 15:31
阅读 765·2019-08-30 15:55
阅读 3233·2019-08-30 15:54
阅读 1129·2019-08-30 11:26
阅读 1876·2019-08-29 13:00
