CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)-阿里云开发者社区

开发者社区> 余二五> 正文

CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)

简介:
+关注继续查看

浮动的工作原理

浮动是让某元素脱离文档流,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动,但都为其腾出空间,块级元素也不例外(被浮动元素占据了部分行空间的块级元素,仍然被看作是占据了一整行,只不过是被浮动元素占据的那部分空间无法利用罢了)。

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止;如果当前线上的水平空间不足,它将逐行向下移动,直到有空间为止(所以浮动元素不会影响页面上方布局)。任何元素都可以浮动,浮动元素会生成一个块级框(拥有块级元素特性,但不占整行),而不论它本身是何种元素。

另外因为浮动元素脱离了文档流,所有它无法为其文档流中的父级元素撑起高度。

清除浮动技巧

   1、clear清除浮动

left    在左侧不允许浮动元素。

right在右侧不允许浮动元素。

both在左右两侧均不允许浮动元素。

none默认值。允许浮动元素出现在两侧。

 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样。例如:如果声明为左边清除,会使元素的上外边框边界刚好在左边浮动元素的下外边距边界之下。

要注意了,我们是通过在别的元素上清除浮动来实现撑开高度的, 而不是在浮动元素上。浮动元素脱离了文档流,就算为其加了清除空间,也影响不了父元素的高度,最多能让其某侧不允许其他浮动元素。

clear 只能作用与块级元素或浮动元素,不过上面已经说了作用于浮动元素的弊端,所以一般都是使用块级元素。

全浏览器通用的clearfix方案,使用伪元素清除浮动【推荐】

// 引入了zoom以支持IE6/7

// 同时加入:before以解决现代浏览器上边距折叠的问题

.clearfix:before,

.clearfix:after {

    display: table;

    content: " ";

}

.clearfix:after {

    clear: both;

}

.clearfix{

    *zoom: 1;

}

另外:也可以在父级元素中增加一个专门清除浮动的块级元素。(不推荐)


    2、BFC清除浮动

   BFC全称是块状格式化上下文,它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征

BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。

BFC可以包含浮动;通常用来解决浮动父元素高度坍塌的问题。

其中,BFC清除浮动就是用的“包含浮动”这条特性。

那么,怎样才能触发BFC呢?

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC

float 为 left | right

overflow 为 hidden | auto | scorll

display 为 table-cell | table-caption | inline-block | flex | inline-flex

position 为 absolute | fixed










本文转自 艺晨光 51CTO博客,原文链接:http://blog.51cto.com/ycgit/1958452,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9495 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10843 0
css清除浮动的方法
今天写页面突然用到要清除浮动的样式,然后就想不去起来了(尴尬)
313 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13183 0
CSS 基础点集锦一:盒子模型、浮动、清除浮动
1、盒子模型: 示意图(图片来自w3school): 说明:上图中,由内而外依次是 元素内容(content) 内边矩(padding-top、padding-right、padding- bottom、padding-left) 边框(border-top、border-right、border-bottom、border- left) 外边距(marging-top、margin
1333 0
mydumper工作原理
相比mysqldump,其优势如下: 1 速度快(好多资料都说快10倍,个人持保留意见); 2 支持多线程导出和导入myloader; 3 采用守护进程方式运行,可定时扫描和快照binlog(-snapshot-interval); 4 快速文件压缩;   也有稍许不足之处,如mydumper不处理MySQL的视图,触发器和存储过程,因此使用mydumper去导出schema并不可靠。
938 0
Logtail从入门到精通(六):工作原理简介
Logtail数据采集原理介绍,包括文件采集原理以及插件采集原理。
3821 0
+关注
20382
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载