float浮动深入理解
【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浮动深入理解的更多相关文章
- css考核点整理(一)-浮动的理解和清除浮动的几种方式
浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...
- 清除float浮动造成影响的几种解决方案
1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响” 学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...
- float浮动的学习
很早以前就接触过CSS,然后就在也没有深入了解过.今天突然遇到有人问了关系浮动的问题,碰巧没事就将内容整理下,与大家交流学习. 首先大家也应该都知道,div是块级元素,在页面中独占一行,自上而下排列, ...
- CSS之float浮动
CSS理解之float浮动 首先我们看看W3C给出的关于 float 的说明: 参考资料 MDN W3C
- 第九篇 float浮动
float浮动 首先老师要声明,浮动这一块,和边距.定位相比,它是比较难的,但是用它,页面排版会更好. 这节课就直接上代码,看着代码去学浮动. 我们先弄一个div,给它一个背景颜色: HTML ...
- css(float浮动和clear清除)
教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1 ...
- css之float(浮动)的特性
详解CSS float属性 float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...
- Float浮动(慕课网学习笔记)
float浮动 属性:值 意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...
- 给li设置float浮动属性之后,无法撑开外层ul的问题。
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
随机推荐
- rndc控制远程dns服务器配置方法
1- 如果不存在/etc/rndc.conf touch /etc/rndc.conf chown named:named /etc/rndc.conf 2- rndc-confgen > /e ...
- 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 ...
- discuz 二次开发
discuz 框架也算是比较流行的社区论坛框架,discuz 的基础架构采用世界上最流行的 web 编程组合 PHP + MySQL 实现,是一个经过完善设计,适用于各种服务器环境的高效论坛系统解决方 ...
- !! 据说年薪30万的Android程序员必须知道事
http://www.th7.cn/Program/Android/201512/742423.shtml Android中国开发精英 目前包括: Android开源项目第一篇——个性化控件(View ...
- 函数柯里化(Currying)示例
”函数柯里化”是指将多变量函数拆解为单变量的多个函数的依次调用, 可以从高元函数动态地生成批量的低元的函数.可以看成一个强大的函数工厂,结合函数式编程,可以叠加出很BT的能力.下面给出了两个示例,说明 ...
- mysql查询优化器的提示(hit)
如果对优化器选择的执行计划不满意,可以使用优化器提供的几个提示来控制最终的执行计划,关于每个提示的具体用法,建议直接阅读官方手册,一些提示和版本有直接关系,可以使用的一些提示如下: high_prio ...
- asp.net 分页-自己写分页控件
去年就发表过asp.net 分页-利用后台直接生成html分页 ,那种方法只是单纯的实现了分页,基本不能使用,那时就想写个自己的分页控件,无奈能力有限.最近有点时间了,就自己做出了这个分页控件.我承认 ...
- 二、快速起步(Mysql镜像)
1.登录镜像站点 docker login daocloud.io 用户名 密码 邮箱 1.1 拉取镜像 docker pull [option] name:[tag] 例如 docker pull ...
- 【SSO单点系列】(3):CAS4.0 登录页验证码的添加
2016.08.23 更新 注意:这个教程只适合4.0版本的,4.1以及以上的版本的已经不试用了, 后面几篇有人提到过 源码网盘链接更新了下 : 链接: http://pan.baidu.com/s/ ...
- EntityFramework Core 学习笔记 —— 包含与排除属性
原文地址:https://docs.efproject.net/en/latest/modeling/included-properties.html 在模型中包含一个属性意味着 EF 拥有了这个属性 ...