CSS 浮动和清除浮动

在写页面布局的过程中,浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。

在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结。

一、浮动的定义

  使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  说到脱离文档流要说一下什么是文档流,文档流是是文档中可显示对象在排列时所占用的位置/空间,而脱离文档流就是在页面中不占位置了。

二、属性

  float:left; 左浮动

  float:right;右浮动

三、浮动的情况

  下面我就用这个布局为例子来讲解浮动,css样式外面的div给了一个高度,其他的不多说。

    

1.左浮动float:left;

  给里面的三个p标签 float:left; 属性,看一下是什么情况的。我们都知道块级标签会默认占据一行的所以他们是一排一个展示的,但是看下图会发现他们按照顺序排列成一排了。

2.右浮动 float:right;

  同样的我们给box中的p标签一个 float:right; 属性。他们会按照顺序排到右边去了。

3.这一次我们只给第二个p浮动来看看会发生什么情况,这时候你会发现,3不见了,他其实在2的下面,我给3一个宽一点的宽度。会发现3在2的下面。

4.给3一个浮动

  他会没有什么变化,因为浮动只会影响他后面的元素,如果上面的元素不浮动,他也不会上去的

  

5.把外面的div宽度变小一些,p浮动

  如果父元素太窄,无法容纳所有的浮动元素,无法容纳的浮动元素会换行显示。

    

6.浮动的特殊情况

  以换行的那个元素为基准,如果有浮动元素的高度大于换行的那个元素,那么当换行元素换行时会被高的那个元素“卡住”。初始样式是左图.

  

7.浮动对文字的影响 给p标签浮动

  浮动框只会占据自己的位置,使文字可以围绕浮动框显示

    

四、浮动之后有很多特性

  1.块级元素可以横排显示

  2.行内元素可以设置宽度和高度

  3.元素没有设置宽度和高度时,宽度为内容撑开宽

  4.支持margin

  5.脱离文档流

  6.提升半层级

  问题:不支持margin:auto;

五、清除浮动

  1. 为什么要清除浮动?

前面提到了我给了外面的div一个高度,这里我们不给他高度,让里面的p浮动看看会发生什么情况。

未浮动

    

浮动之后

  

  我们会发现子元素浮动会造成父级盒子高度坍塌,这样如果下面在进行继续布局的话会使页面布局错乱,(下图中黄色的盒子是nav下的div)如果想要继续布局就要清除浮动了,这里我介绍几种清除浮动的方法。

  标签和样子如下两幅图

父级的做法

  1. 父级 紧邻兄弟法

    给nav一个clear:both属性,下图会发现可以正常显示

    缺点:只是让后面的元素正常显示,并没有撑开box的高度

  2.父级给高度

    box给高度,可以正常显示。

    缺点:一般都是元素内容撑开高度,拓展性不好。     

  3.父级元素 display:inline-block;

    box给display:inline-block;可以正常显示

    缺点:父级盒子margin:auto;失效,会发现上部分和下面黄色中间有间隙。

  4.父级overflow:hidden;

    可以正常显示

    缺点:需要配合宽度

   子元素

    1.要加给浮动元素末尾的后面再添加一个元素。加上一个clear属性

      可以正常显示

      缺点:随意的添加一个空元素,不符合代码规范

  

  2.恭喜你看到了这里,在这里我介绍一种当今最主流的清除浮动的方法。

    after伪元素清除浮动,添加给box,依旧可以正常显示,不发图了。

    clearfix:after{content:””; display:block; clear:both;}

以上就是我对浮动和清除浮动的知识的见解和总结,如有不足之处,希望各位可以指正,谢谢!Web前端视频
楼主可以啊!还不如看看我这个 Web前端全套视频 百度链接:http://pan.baidu.com/s/1eS43dse 密码:i8zl

CSS 浮动和清除的更多相关文章

  1. CSS浮动与清除浮动(overflow)例子

    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...

  2. 六.CSS浮动与清除

    浮动 把元素从常规文档流中取出.是元素脱离常规文档流 浮动的作用: ①实现文本绕排图片效果 ②让原本在上下方向上堆叠的块级元素可以变成左右并列,从而实现多栏布局 文本绕排图片 首先HTML代码如下 & ...

  3. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  4. css浮动与清除浮动

    css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...

  5. CSS浮动并清除浮动(造成的影响)

    一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...

  6. CSS浮动和清除

    float:让元素浮动,取值:left(左浮动).right(右浮动) clear:清除浮动,取值:left(清除左浮动).right(清除右浮动).both(同时清除上面的左浮动和右浮动) 1.CS ...

  7. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  8. CSS浮动和清除浮动

    1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...

  9. css浮动以及清除

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

随机推荐

  1. JavaScript -- 标签 , Break 和 Continue 语句

    break 语句用于跳出循环. continue 用于跳过循环中的一个迭代. 标签引用,break 语句可用于跳出任何 JavaScript 代码块. demo: <!DOCTYPE html& ...

  2. 【UVA534】Frogger 最小瓶颈路

    题目大意:给定一张 N 个点的完全图,求 1,2 号节点之间的一条最小瓶颈路. 题解:可知,最小瓶颈路一定存在于最小生成树(最小瓶颈树)中.因此,直接跑克鲁斯卡尔算法,当 1,2 号节点在同一个联通块 ...

  3. Linux上shell脚本date的用法

    在shell脚本里date命令的用法: %% 一个文字的 % %a 当前locale 的星期名缩写(例如: 日,代表星期日) %A 当前locale 的星期名全称 (如:星期日) %b 当前local ...

  4. 3分钟读懂移动端rem使用方法

    1.为什么要用rem 博客很久没写了,原因很简单. 最近接手了一个项目,要同时做PC和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了. 移动端最麻烦的是什么? 不同分辨率适配! ...

  5. RabbitMQ的生产者和消费者

    低级错误:启动程序的时候报错:socket close: 原因在配置文件中写的端口是:15672,应该是5672: client端通信口5672管理口15672server间内部通信口25672erl ...

  6. valgrind使用指南

    http://note.youdao.com/noteshare?id=5de9c049ccdb1defdc4368db83813dd3

  7. ceilometer主要组件分析

    一.Agent 主要有compute agent 和central agent,还有一些其他的agent这里暂时不分析. agent初始化时会动态加载给定namespace的pollster插件,并通 ...

  8. bzoj千题计划176:bzoj1199: [HNOI2005]汤姆的游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=1199 求出圆x的范围 把要判断的点按x从小到大排序 枚举图形 二分出x满足这个图形的一段区间 枚举这 ...

  9. 第一次使用 markdown 写博客

    Web前端 js 框架(四选一) 有可能的话,学 Vue.js ,React.js ,Angular.js,Awrelia css 学习 Sass 学会 css 的可编程 HTML5 详细语法 Nod ...

  10. html5 canvas 圆形径向渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...