浮动(float)与清除浮动(clear)
上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以浮动也有left、right、none三种。浮动元素是脱离文档流的,漂浮在文档流之上,和文档流不是一个层次。
HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而这些水就代表的是页面中的各个元素,他们都是有顺序的进入水槽(文档流的顺序 和我们写字一样,从上到下从左到右)。当出现了一个具有浮动属性(float)的元素时,就好像是水流中多了一块泡沫,它会浮在水面上(也就是说明元素脱 离了文档流)。在水流停止后(页面加载完毕),这个元素会停靠在水槽的边缘或者停靠在别的泡沫边缘(浮动元素会处于包含框的边缘或者另一个浮动元素的边 缘)。(引用自老贝v5)
看上图,4个div都各占一行(即使div的宽度不宽,后面足以容纳下一个div,但还是各占一行),形成文档流,现在我们给div2加上float:left(左浮动),变成下图所示:我们发现div3的一部分被div2遮住了,div3和div4都上移了一部分,紧跟在div1后面,组成了新的文档流,而div2相当于漂浮在文档流之上,又因为是左浮动,所以靠左排列。
如果给div2加上右浮动,更能清楚的看到div3与div4自动上移,占据了div2的位置。如下图:
如果把div2,3,4都左浮动之后会是怎样呢?我们做了下图的试验,可以看到,div3和div4都紧跟在div2之后,如果一行排列不了,那么那个元素会掉到下一行(如下图2)。由此可以得出结论:
假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前,远离页面边缘的一端是后。(摘自经验分享:CSS浮动(float,clear)通俗讲解)
到这里,大家应该基本了解了浮动的原理,那么接下来我们看看浮动会导致什么?
浮动会导致父元素高度坍塌。因为浮动使元素脱离了文档流,并不占据文档流的位置,父元素也就不能被撑开,所以高度塌陷了。这给用浮动页面布局带来了麻烦,解决方法就是清除浮动。
清除浮动
清除浮动的关键字是clear,官方定义如下:
语法:
clear : none | left | right | both
取值:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
如图div1与div2都左浮动,div2紧跟在div1后面,如果想让div2在div1下面,就要清除浮动;因为清除浮动只作用与你想让移动的元素,所以对div1设置css样式clear:right是没有任何作用的,因为想让div2掉下去,就得对div2设置clear:left;就会如图让div2移到下方。
再举一个例子:div1与div2左浮动,导致外层container高度塌陷,给页面增加一个页脚(footer),按照上面的说法,要想让页脚回到下面,只需给footer{clear:left;},但是container的边框仍然是一条线,怎么办呢?
1.增加一个清除浮动的子元素
2.我们可以给父元素添加以下属性来触发BFC:
✦ float 为 left | right
✦ overflow 为 hidden | auto | scorll
✦ display 为 table-cell | table-caption | inline-block | flex | inline-flex
✦ position 为 absolute | fixed
所以我们可以给父元素设置 overflow:hidden/auto(如果你还要兼顾IE6的话,加上*zoom:1;来触发hasLayout)效果和上图相同,也可以给父元素也设置浮动,但页脚会上移,还得给页脚设置clear:left;不推荐用。也可以给父元素设置display:table。效果相同,页脚也不需要设clear:left;但页面布局可能被改变,不推荐用。
3.用:after伪元素,思路是用:after元素在div后面插入一个隐藏文本”.”,隐藏文本用clear来实现闭合浮动。推荐用。
.clearfix:before,.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
} // 全浏览器通用的clearfix方案,引入了zoom以支持IE6/7, 同时加入:before以解决现代浏览器上边距折叠的问题。
以上就是整理的浮动与清除浮动的基本知识啦~
浮动(float)与清除浮动(clear)的更多相关文章
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- CSS定位机制:浮动 float及清除浮动的常用方法
CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- css浮动现象及清除浮动的方法
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕 再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...
- CSS——浮动及应用&清除浮动
浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆 ...
- 浮动float和清除clear
一.浮动(float) float简介 取值:left,right,none,inherit,默认none(不浮动) 可应用与所有元素 没有继承性 不在正常流中,但会影响布局.因为一个元素浮动时,其他 ...
- CSS中浮动属性float及清除浮动
1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...
- 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- 浮动float、浮动影响和清除浮动
普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆放到合适的位置? CSS ...
- CSS 浮动副作用 ,清除浮动
参考:http://www.divcss5.com/jiqiao/j406.shtml 副作用:一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,背景色不显示(如果父级不设 ...
随机推荐
- 豌豆夹Redis解决方式Codis源代码剖析:Proxy代理
豌豆夹Redis解决方式Codis源代码剖析:Proxy代理 1.预备知识 1.1 Codis Codis就不详细说了,摘抄一下GitHub上的一些项目描写叙述: Codis is a proxy b ...
- OpenTK教程-0序言
记得很久之前,我写过一个基于.NET的3D开发框架/工具比较.当时选定的技术是WPF.但是随着项目发展,需要处理的图形数量越来越多,基于WPF的处理起来性能有问题,最后还是使用了基于OpenTK的解决 ...
- POST/有道翻译 有bug
1.发现在翻译时地址没有变,那是POST请求. 2.通过fidder抓包工具抓取url 3.对data分析,发现每次salt和sign都在变化. 4.查看源码,先用站长工具http://tool.ch ...
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- ES6数组及数组方法
ES6数组可以支持下面的几种写法: (1)var [a,b,c] = [1,2,3]; (2)var [a,[[b],c]] = [1,[[2],3]]; (3)let [x,,y] = [1,2,3 ...
- 深度搜索DFS-Lake Counting(POJ NO.2386)
题目链接POJ NO.2386 解题思路: 这个也是一个dfs 的应用,在书上的例子,因为书上的代码并不全,基本都是函数分块来写,通过这个题目也规范了代码,以后能用函数的就都用函数来实现吧.采用深度优 ...
- 解决author波浪线Spellchecker inspection helps locate typos and misspelling in your code, comments and literals, and fix them in one click
自从把默认的头注释的author改成自己的名字以后越看越顺眼,但是发现名字下面一直有个波浪线,强迫症简直不能忍. 然后当你把鼠标放上去,再点击提示上的"more",会看到下面的提示 ...
- python3.5 + PyQt5 +Eric6 实现的一个计算器
目前可以实现简单的计算.计算前请重置,设计的时候默认数字是0,学了半天就做出来个这么个结果,bug不少. python3.5 + PyQt5 +Eric6 在windows7 32位系统可以完美运行 ...
- mac安全权限解决
如果有以下提示的,并不是文件损坏了,而是macOS Sierra新系统取消了安装本地程序的功能. 解决办法如下: 1.首先打开终端(找不到哪里打开终端 command+空格 搜索 "终端 ...
- Keras:基于Theano和TensorFlow的深度学习库
catalogue . 引言 . 一些基本概念 . Sequential模型 . 泛型模型 . 常用层 . 卷积层 . 池化层 . 递归层Recurrent . 嵌入层 Embedding 1. 引言 ...