1.float
1> 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
2> 创建浮动框可以使文本围绕图像。要想阻止行框围绕浮动框，需要对该框应用clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
2. 行内元素在设置浮动后可以设置高宽。
当该属性(display)不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat（ie）或cssfloat（非ie）。(注意这里为stylefloat或cssfloat，而不是float)
因为只有块元素才会有物理属性，在css世界里边，有三种形态的东西，
1>. 块元素。 特性：有物理属性，width,height写值起作用，而且要占据一行。
2>. 内联元素。 特性：没有物理属性。但是margin，padding值有用。不占据一行，后边可以有兄弟元素。
3>. 即是块又是内联，根据兄弟兄弟元素决定。
为什么是float之后才会有物理属性，这就是块与内联元素相互转化的问题。
块元素 -> 内联元素： display:inline;
内联元素 -> 块元素： display:block;
float就是隐性的把内联元素转化为块元素，这是对内部的特性就是有物理特性，但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于：display:inline-block;
那为什么不直接display:inline-block;因为这个在ie6下有几个px的bug。
3. 块级元素在float下的变化
一直以为float属性不会对div的宽度或高度有什么影响.但是,float对div宽度的影响是显著的.
1>首先div的默认宽度是width:auto;意思是自动调整宽度.
在不带float的情况下,div的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化.
这个可能是为了clear而设定
2> 第二div的默认高度也是height:auto.带不带float的div都一样,都是自动调整至最小化
3> 第三div带float时,只要宽度不超过网页宽度,则其它元素包括div都要环绕它.或者也可以认为此时的带float的div是一个特殊的 padding
因此，左右分开的网页,左侧的宽度固定,右侧的宽度随分辨率自动适应,并占满右侧的空间.
方法就是左侧的div用float:left.而右侧的div不带float.这样就可以实现这个效果了.
4. 清除浮动
1> 父级div定义伪类：after和zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码
2> 在结尾处添加空div标签clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3> 父级div定义height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
4> 父级div定义overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
补充：
为什么"overflow:hidden"能清除浮动的影响。
我们经常会在父元素里设置某个子元素浮动。浮动后，子元素脱离了文档流，使得父元素无法包住这个浮动的子元素。我们通常在父元素上设置一个clearfix的伪元素来清除浮动；同样，我们可以利用BFC可以包含浮动这一特性来清除浮动
作者：前端小少女
链接：https://www.jianshu.com/p/7e04ed3f4bea
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论