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>解决了,但自己不是特别明白,又在网上查 ...
随机推荐
- ID3决策树的Java实现
package DecisionTree; import java.io.*; import java.util.*; public class ID3 { //节点类 public class DT ...
- 关于Left join
Sql关联表时条件放在On或者where上结果是不一样的. 1.放在on上 如下 select S.StoreID,* from BizProductItem as P left join BizSt ...
- 前端开发利器-Brackets IDE
是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器 ...
- 《30天自制操作系统》12_day_学习笔记
harib09a: 定时器:(Timer)每隔一段时间,会向CPU发送一个中断.这样CPU不用记住每一条指令的执行时间.没有定时器很多指令CPU都很难执行.例如HLT指令,这个指令的执行时间不是个固定 ...
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 ...
- FRM-40831 出现截断
此问题还有一种情况: 在form搜索界面使用时间范围搜索时遇到的 当在PRE-QUERY中调用如下查询时,如果CUX_SUM.PERIOD_NAME的字段长度要设置的长一些,个人建议是前面2个字段的2 ...
- CSS3 border-image详解、应用
一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...
- Linq To Sqlite 一一二二
说在前头 之所以写下这些文字,主要是因为使用LINQ的同志们都觉它的美好(至于有多美好,各位心里知道,我就不在描述了,如果你是你还不了解LINQ,园子里有大把的文章),微软老哥只提供了自家的SQLSe ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(31)-MVC使用RDL报表
系列目录 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持asp.ne ...
- 【转】PowerShell入门(序):为什么需要PowerShell?
转至:http://www.cnblogs.com/ceachy/archive/2013/01/23/PowerShellPreface.html 曾几何时,微软的服务器操作系统因为缺乏一个强大的S ...