Css深入理解之浮动_慕课网课程笔记

前言

这篇是在慕课网上跟着张鑫旭重走CSS之路的第三篇学习笔记了,主要是学习float属性,闲话少说,下面进入正文.

float的历史

要想了解一个东西,我们还是需要从本质去了解它,那么我们就需要问一个直抵本质的问题:float被设计出来是干嘛的? 答案是:实现文字环绕效果.对,就是这么简单因为这个属性是在很久很久以前就有了,那个时候是没有那么多炫酷的CSS效果的,所以这个属性设计的初衷很简单,就是实现文字环绕.

float的特性

我们知道float的特性有两个,一个是包裹,一个就是破坏.下面就主要讲讲这两个特性

包裹

包括有以下三种行为,收缩/坚挺/隔绝,简而言之就是把一个元素包裹起来,类似在外面套一个盒子一样,将其与其它页面元素隔离开来.又成BFC(块级格式化上下文)

破坏

所谓的破坏性是指,当一个子元素应用浮动属性后,可能会导致父元素高度塌陷,这个就是我们常说的浮动的破坏性.

另外需要强调的是,这种特性不是bug,而是CSS规范,这是因为浮动的只是为了实现文字环绕效果,当初设计的时候,就是应用了破坏性,当元素应用浮动时,包裹它的元素因破坏性塌陷,从而导致文字环绕到元素周围.

清除浮动

清除浮动主要是从以下两方面入手:

• 在父元素底部插入 有 clear:both声明的元素;
• 依然与外部元素有连接,比如,依然有margin重叠.

常用形式有以下两种:

l  HTML block水平元素底部插入

这样会导致很多无意义的div元素

l  CSS after 伪类元素底部生成

对低版本的IE浏览器不友好.

父元素 BFC(高级浏览器)或者haslayout(IE)

相当于将元素与其它元素完全隔绝开来.

这个方法也是无法实现多浏览器支持的.低版本的IE浏览器可以使用 zoom:1.

针对清楚浮动,比较合理的做法是

高版本浏览器使用

.clearfix{ display;block;height:0,clear:both;overflow:hidden}或者

.clearfix :after{display : table; clear:both}

IE6/7可以使用

.clearfix{ *zomm:1}

Tips:clearfix 只应该应用在包含浮动子元素的父级元素上,乱用的话可能会导致低版本的浏览器效果无法预知

浮动的应用

浮动元素的block块状化

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

以上两个特性是我们可以在日常的写CSS的时候加以利用的特性,比如,利用这个特性和用户写一些需要紧密排列的元素的页面布局.

缺点:

1 容错性很差,无法自试用布局

2.无法重用,因为需要设置固定的宽度高度,所以重用性很差

浮动与流体布局

1.单侧固定

左侧固定元素应用 :width+float

右侧文字应用padding-left/margin-left

这个是最基本的浮动应用了,标准的浮动,相当于文字样式margin/padding:0 样式,当给环绕元素加上padding/margin时,那么环绕元素将不会继续在浮动元素下面展示,而是在其一侧对齐

2.右边固定,左侧自适应

基本可以跟上面所说的描述相反即可,但是需要注意的是,浮动在右边的元素是需要在页面中放到左边元素的前面,这个是跟我直观感受相反的一点.

那怎么样才能在页面元素前后顺序一致的时候实现右侧固定左侧自适应布局呢?这里就要用到我们上面刚刚说过的浮动的块状化和紧密排列特性了.具体来说就是.左侧环绕元素和固定宽度元素都使用flat:left布局,然后左侧宽度100%这个时候会把固定布局的元素挤到下一行去,这个时候我们需要给固定布局的元素叫一个负值的margin,让它回到我们希望的位置.这个时候环绕的问文字右侧浮动元素遮挡,那我们可以使用一个子元素包裹所有环绕文字,并给它加一个margin/padding.

简而言之,就是:

环绕父 元素: width:100%+float

环绕子元素: padding/margin

右侧固定元素 width+float+marginf负值

3.智能自适应

固定套路

一侧浮动,另一侧使用display:table-cell(ie8+)/inline-block(ie7)

兼容性

主要是IE7上的一些问题了,表示已放弃IE7,只当是思路学习了.

外链:

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