【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. rndc控制远程dns服务器配置方法

    1- 如果不存在/etc/rndc.conf touch /etc/rndc.conf chown named:named /etc/rndc.conf 2- rndc-confgen > /e ...

  2. MySQL学习笔记——ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) Enter password: E ...

  3. discuz 二次开发

    discuz 框架也算是比较流行的社区论坛框架,discuz 的基础架构采用世界上最流行的 web 编程组合 PHP + MySQL 实现,是一个经过完善设计,适用于各种服务器环境的高效论坛系统解决方 ...

  4. !! 据说年薪30万的Android程序员必须知道事

    http://www.th7.cn/Program/Android/201512/742423.shtml Android中国开发精英 目前包括: Android开源项目第一篇——个性化控件(View ...

  5. 函数柯里化(Currying)示例

    ”函数柯里化”是指将多变量函数拆解为单变量的多个函数的依次调用, 可以从高元函数动态地生成批量的低元的函数.可以看成一个强大的函数工厂,结合函数式编程,可以叠加出很BT的能力.下面给出了两个示例,说明 ...

  6. mysql查询优化器的提示(hit)

    如果对优化器选择的执行计划不满意,可以使用优化器提供的几个提示来控制最终的执行计划,关于每个提示的具体用法,建议直接阅读官方手册,一些提示和版本有直接关系,可以使用的一些提示如下: high_prio ...

  7. asp.net 分页-自己写分页控件

    去年就发表过asp.net 分页-利用后台直接生成html分页 ,那种方法只是单纯的实现了分页,基本不能使用,那时就想写个自己的分页控件,无奈能力有限.最近有点时间了,就自己做出了这个分页控件.我承认 ...

  8. 二、快速起步(Mysql镜像)

    1.登录镜像站点 docker login daocloud.io 用户名 密码 邮箱 1.1 拉取镜像 docker pull [option] name:[tag] 例如 docker pull ...

  9. 【SSO单点系列】(3):CAS4.0 登录页验证码的添加

    2016.08.23 更新 注意:这个教程只适合4.0版本的,4.1以及以上的版本的已经不试用了, 后面几篇有人提到过 源码网盘链接更新了下 : 链接: http://pan.baidu.com/s/ ...

  10. EntityFramework Core 学习笔记 —— 包含与排除属性

    原文地址:https://docs.efproject.net/en/latest/modeling/included-properties.html 在模型中包含一个属性意味着 EF 拥有了这个属性 ...