清除浮动的可用方式

wizChen 发布于2019-08-29 11:18 / 2680人阅读

摘要：清除浮动的可用方式测试浏览器正常格式的代码显示如下图片描述但是对和应用后浮动的影响显而易见使元素从正常的文档流中删除，但是依旧会占据空间。

清除浮动的可用方式 （测试浏览器：FF）

div0

div1

div2

this is a paragraph

显示如下：
图片描述

但是对class1和class2应用float:left后：

浮动的影响显而易见

float:left/right/none; 使元素从正常的文档流中删除，但是依旧会占据空间。如果设置float的元素没有设置宽度并且无内容时，会缩成一个圆点。不设置宽度时宽度会随内容的增加而增加。浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同。

清除浮动

对受到影响的元素（一般是紧随其后的同级元素）添加样式clear: both，缺点：一般是加上空标签

，如果页面浮动布局多，就要增加很多空div。

               div.class3{
                   clear:both;
                   }

父级元素设置宽度和overflow:hidden，不能设置height，浏览器会自己捕获高度。
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

父级div定义宽度和overflow:auto，不能设置height，浏览器会自己捕获高度。

父级div定义height，直接解决了父级div无法自动获取到高度的问题
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题，因此不推荐使用，只建议高度固定的布局时使用

父级div定义伪类:after和zoom

   
   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}
  .clearfloat{zoom:1}

原理：IE8以上和非IE浏览器才支持:after，原理和方法1有点类似（在末尾设置不显示的块级元素，并加上clear:both），zoom(IE转有属性)可解决ie6,ie7浮动问题。
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。定义公共类后可以减少CSS代码。

总结

清除浮动的方法中，第五种父级div定义伪类具有较好的浏览器兼容性，在大型网站中多有应用，但是代码复杂，要加深理解。

GPU云服务器云服务器清除浮动 html浮动的影响的清除方法缓存文件的清除

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

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

BFC-块格式化上下文（block formatting context）

摘要：概念块格式化上下文，是页面块级元素布局及浮动元素彼此交互的区域。阻止相邻元素外边距合并的方法被非空内容或分隔开。不在一个普通流中或用分割开。让在垂直方向上不毗邻。 BFC概念 BFC（block formatting context）块格式化上下文，是Web页面块级元素布局及浮动元素彼此交互的区域。BFC是一个独立的布局环境，（实际页面渲染时是不可见的），由BFC构建的区域其内部元素...

keithyau 2019-08-29 16:07 评论0 收藏0
重新开始学前端之浮动

摘要：寒假来了打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。在正常布局下中位于该浮动元素之下的内容此时会围绕着浮动元素。在父元素上设置属性，如果此属性设置为或者则可以达到清除浮动的效果。但要注意并不是专门用于清除浮动。寒假来了, 打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。更多内容可以去我的github: https://githu...

ZoomQuiet 2019-08-22 11:24 评论0 收藏0
重新开始学前端之浮动

摘要：寒假来了打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。在正常布局下中位于该浮动元素之下的内容此时会围绕着浮动元素。在父元素上设置属性，如果此属性设置为或者则可以达到清除浮动的效果。但要注意并不是专门用于清除浮动。寒假来了, 打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。更多内容可以去我的github: https://githu...

piapia 2019-08-29 14:11 评论0 收藏0
[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

YorkChen 2019-08-01 17:39 评论0 收藏0