【CSS深入理解之float浮动】听课总结

http://www.imooc.com/learn/121
 

1.float的原本作用:为了实现文字环绕

2.float的包裹性和破坏性:

  包裹性:收缩、坚挺、隔绝。BFC(Block Formatting Context),块级格式化上下文

  破坏性:会让父元素高度塌陷(浮动的破坏性只是单纯的为了实现文字的环绕效果而已)

  具有包裹性的其他小伙伴:dispaly:inline-block/table-cell...  ;

position:absolute(亲近)/fixed/sticky

               overflow:hidden/scroll

  具有破坏性的其他小伙伴:display:none

              position:absolute(亲近)/fixed/sticky

3.清除浮动(清除浮动带来的影响)

  权衡后的策略:

  .clearfix:after{content:""; display:block; height:0; overflow:hiddden; clear:both;}

  .clearfix{*zoom:1;}

  更好的方法:

  .clearfix:after{content:""; display:table; height:0; clear:both;}

  .clearfix{*zoom:1;}

  !切勿滥用。clearfix应用在包含浮动子元素的父级元素上

4.浮动的量大特性

  1>元素的block块状化(砖头化)

  2>破坏性造成的紧密排列特性(去空格化)

  (tip:换行符会产生空白间距;' '  的本质是字符)

5.砌砖布局的问题

  1>容错性比较高,容易出现问题(错位)

  2>这种布局需要元素固定尺寸,很难重复使用

  3>在低版本IE有很多问题

  让IE7飙泪的浮动问题:

  1>含clear的浮动元素包裹不正确的问题;

  2>浮动元素倒数2个莫名垂直间距问题;

  3>浮动元素最后一个字符重复问题;

  4>浮动元素楼梯排列问题;

  5>浮动元素和文本不在同一行的问题

6.浮动与流体布局

  文字环绕衍生——单侧固定

  左侧固定,右侧自适应的流体布局

  

这里没太看明白,详细 戳:http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

float浮动深入理解的更多相关文章

  1. css考核点整理(一)-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

  2. 清除float浮动造成影响的几种解决方案

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  3. float浮动的学习

    很早以前就接触过CSS,然后就在也没有深入了解过.今天突然遇到有人问了关系浮动的问题,碰巧没事就将内容整理下,与大家交流学习. 首先大家也应该都知道,div是块级元素,在页面中独占一行,自上而下排列, ...

  4. CSS之float浮动

    CSS理解之float浮动 首先我们看看W3C给出的关于 float 的说明: 参考资料   MDN   W3C

  5. 第九篇 float浮动

    float浮动   首先老师要声明,浮动这一块,和边距.定位相比,它是比较难的,但是用它,页面排版会更好.   这节课就直接上代码,看着代码去学浮动. 我们先弄一个div,给它一个背景颜色: HTML ...

  6. css(float浮动和clear清除)

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

  7. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

  8. Float浮动(慕课网学习笔记)

    float浮动 属性:值 意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...

  9. 给li设置float浮动属性之后,无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

随机推荐

  1. ID3决策树的Java实现

    package DecisionTree; import java.io.*; import java.util.*; public class ID3 { //节点类 public class DT ...

  2. 关于Left join

    Sql关联表时条件放在On或者where上结果是不一样的. 1.放在on上 如下 select S.StoreID,* from BizProductItem as P left join BizSt ...

  3. 前端开发利器-Brackets IDE

    是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器 ...

  4. 《30天自制操作系统》12_day_学习笔记

    harib09a: 定时器:(Timer)每隔一段时间,会向CPU发送一个中断.这样CPU不用记住每一条指令的执行时间.没有定时器很多指令CPU都很难执行.例如HLT指令,这个指令的执行时间不是个固定 ...

  5. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧   ...

  6. FRM-40831 出现截断

    此问题还有一种情况: 在form搜索界面使用时间范围搜索时遇到的 当在PRE-QUERY中调用如下查询时,如果CUX_SUM.PERIOD_NAME的字段长度要设置的长一些,个人建议是前面2个字段的2 ...

  7. CSS3 border-image详解、应用

    一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...

  8. Linq To Sqlite 一一二二

    说在前头 之所以写下这些文字,主要是因为使用LINQ的同志们都觉它的美好(至于有多美好,各位心里知道,我就不在描述了,如果你是你还不了解LINQ,园子里有大把的文章),微软老哥只提供了自家的SQLSe ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(31)-MVC使用RDL报表

    系列目录 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持asp.ne ...

  10. 【转】PowerShell入门(序):为什么需要PowerShell?

    转至:http://www.cnblogs.com/ceachy/archive/2013/01/23/PowerShellPreface.html 曾几何时,微软的服务器操作系统因为缺乏一个强大的S ...