关于CSS中float的两点心得以及清除浮动的总结
对一个元素运用float后,该元素将脱离正常文档流,这意味着:
1. 运用float后,该元素不再影响父元素的高度,如果一个元素的所有子元素都是float的话,那么该元素的高度是0,这样后面元素渲染的时候就会见缝插针,在该元素留下的一切空白中渲染,这个时候就需要清除浮动。关于清除浮动,首先要明白的是,什么是清除浮动。清除浮动实际上是指,撑开父元素的高度,让后面的元素渲染时,不再见缝插针地跑到它留下的空白中。这有很多现成的解决方法,需要明确的一点是:这些方法有些是作用在浮动元素的父元素上的,有些是直接作用在浮动元素本身的(吐一个槽:很多介绍清除浮动的文章都不说明是加在父元素还是浮动元素本身上的,让读者云里雾里)。
2. 运用float后,该元素虽然脱离了文档流,但后面元素在渲染的时候,还是会为它留下显示的空间。这也是它和position: absolute脱离文档流的区别所在,后者连显示空间也不会留下。
关于只留下显示空间,这一点比较微妙。一图胜千言,如下图,
div1向左浮动,剩下的p元素在它右边周围排布,那么,这时候p的宽度是多少呢?是不是总宽度减去div1的宽度呢?不是,这时p的宽度仍然是100%,不信的话,可以给p设置一个margin-left:10px。结果会发现,p的左边仍然是紧贴着div1的,因为p的宽度是100%,它的border还在最左边,因此,区区10px的margin当然不会让它过去,这就是只留下显示空间,但不影响其它一切渲染的真正含义。实际上,它们的关系大概是如上图中的虚线所示。
明白了塌陷的原因自然也就明白了如何清除浮动。
塌陷的原因是父元素的所有子元素都脱离正常流而导致父元素失去高度。那么只要找到让父元素重新找回自信,不,是重新找回高度的办法就可以了。最简单的,给父元素设置一个固定高度,浮动不就清除了吗,但这样坏处明显,因为你子元素的高度是不固定的,可能会造成溢出或掩藏。复杂一点的,给父元素末尾添加一个子元素,再给子元素设置clear:both,那么后面的元素就都回归正常流了,高度也就有了。更干净点的,因为不能添加结构来完成样式,即不能用HTML的方式来修补样式,所以要用到一个.clearfix:after的伪类,用它来模拟一下添加的一个额外的子元素,再给它设置clear:both,这样就两全其美了,当然不要忘了给它设置其它一些属性(yi dian tiao jiao),以便让它心里能接受clear:both这样的设定,比如display:table;content:'';height:0之类的。最后,还要注意低版本IE下的hack,即*zoom:1。
关于CSS中float的两点心得以及清除浮动的总结的更多相关文章
- CSS中float和Clear的使用
CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...
- CSS那些事儿-阅读随笔3(清除浮动)
浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...
- css中float left与float right的使用说明
转自:http://www.jb51.net/css/33740.html 脚本之家 No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block( ...
- 关于css中float的理解
感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...
- CSS中float属性
这个东西叫浮动.顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流.正常情况下,HTML页面中块元素都是从上倒下排列的.如果想实现左右结构.float的一种选择(当然还有其他方法). ...
- html/css中float浮动的用法
一.float基础用法示例 1.我们先建两个div盒子,设置高度.宽度和背景颜色: 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就 ...
- 认识CSS中布局之文档流、浮动、定位以及叠放次序
前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
- 解决CSS中float:left后需要clear:both清空的繁琐步骤(转)
之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...
随机推荐
- Gym - 101550A(Artwork 倒序+并查集)
题目: 思路: 1.对输入数据离线,先把所有的黑线都画出来,统计一下剩余的白色连通块的个数,dfs过程将一个连通块放到一个集合中. 2.倒着往前消去黑线,如果当前的块A是白块就看他的四周有没有白块:有 ...
- mysql insert一条记录后 返回创建记录主键id的方法
mysql插入数据后返回自增ID的方法 mysql和oracle插入的时候有一个很大的区别是,oracle支持序列做id,mysql本身有一个列可以做自增长字段,mysql在插入一条数据后,如何能获得 ...
- SVN A C D M G U R I 的含义
A:add,新增 C:conflict,冲突 D:delete,删除 M:modify,本地已经修改 G:modify and merGed,本地文件修改并且和服务器的进行合并 U:update,从服 ...
- 如何在 CentOS 7 上安装 Nginx
本文首发:开发指南:如何在 CentOS 7 上安装 Nginx Nginx 读作 engine x, 是一个免费的.开源的.高性能的 HTTP 和反向代理服务,主要负责负载一些访问量比较大的站点. ...
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
- PAT 1123 Is It a Complete AVL Tree
An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...
- [luoguP1220] 关路灯(DP)
传送门 如果去关某一个灯,那么途中经过的灯都能关闭,那么就是连续一段区间,区间DP. f[i][j][0] 表示关完 i, j 这个区间且在 i 这个位置 f[i][j][1] 表示关完 i, j 这 ...
- poj 2404 中国邮递员问题 欧拉回路判定+状压dp
/* 状压dp 邮递员问题:求经过任意点出发经过每一条边一次并回到原点. 解法:1.如果是欧拉回路那么就是所有的边的总和. 2.一般的解法,找出所有的奇度顶点,任意两个顶点匹配,即最小完美匹配,可用状 ...
- [NOI2000] 单词查找树
★★ 输入文件:trie.in 输出文件:trie.out 简单对比 时间限制:1 s 内存限制:128 MB 在进行文法分析的时候,通常需要检测一个单词是否在我们的单词列表里.为了提 ...
- Problem 2669
Romantic Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...