【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. 怎样实现excel隔行隔列变色效果的方法

    大家在使用excel的过程中,一定见过别人编排的excel文档,隔行添加单元格背景颜色,也就是通常所说的隔行变色效果.Excel中隔行变色效果的好处是:当在Excel中浏览一个非常大的工作簿中的数据时 ...

  2. EBS R12.2 创建应用层的启动和关闭脚本

    Create the following files to start and stop R12. application tier. Change the apps and weblogic pas ...

  3. C# UDP 连接通信 简单示例

    Udp.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  4. Dynamics AX 2012 R3 Demo 安装与配置 - 编译和配置 (Step 3)

        在前两节中,Reinhard主要讲解了如何配置安装环境,安装数据库服务器,AOS和客户端.至此安装工作已经结束,下面Reinhard开始讲解如何编译和配置.     运行客户端后,系统弹出初始 ...

  5. 《Unix网络编程》卷一(简介TCP/IP、基础套接字编程)

    通常说函数返回某个错误值,实际上是函数返回值为-1,而全局变量errno被置为指定的常值(即称函数返回这个错误值). exit终止进程,Unix在一个进程终止时总是关闭该进程所有打开的描述符. TCP ...

  6. Java虚拟机学习(4):对象内存分配与回收

    对象优先在Eden上分配 大多数情况下,对象优先在新生代Eden区域中分配.当Eden内存区域没有足够的空间进行分配时,虚拟机将触发一次 Minor GC(新生代GC).Minor GC期间虚拟机将E ...

  7. WIFI驱动的移植 realtek 8188

    一般我们拿到的android源代码中wifi应用层部分是好的, 主要是wifi芯片的驱动要移植并添加进去. wifi驱动的移植, 以realtek的8188etv为例到官网下载相应的驱动, 解压后可以 ...

  8. solr 4.6配置正解

    最近在学习solr,可是在网上找了很多个配置的资料,要不就是solr版本不对,反正各种问题.最后终于出来了,在这里给大家分享一下 1.准备工作 我们要先去下载一个tomcat,我下载的版本是tomca ...

  9. JAVA基础知识之JDBC——ResultSet的滚动和更新(statement的额外参数)

    ResultSet不仅可以内存中的一张二维表一样保存statement执行SQL的结果集,还能通过结果集修改DB的数据.ResultSetMetaData则可以用来获得ResultSet对象的相关信息 ...

  10. Android开发之MediaRecorder类详解

    MediaRecorder类介绍: MediaRecorder类是Android sdk提供的一个专门用于音视频录制,一般利用手机麦克风采集音频,摄像头采集图片信息. MediaRecorder主要函 ...