2017年8月1７日

CSS浮动

原理

变化：块级->行内块级（可以指定宽高，但不会单独占一行）
有关行内块级的隐藏属性：使用下列语句之一，会自动使元素转换为行内块级。

position:absolute;position:fixed;float:left;float:right;

应用

　　布局、排版（一行中显示）
　　1-2-1；1-3-1；1-1-1

语法

float:left;float:right;

影响及清除浮动

　　设置了浮动后会脱离标准流，紧贴着父元素左右浮动。浮动后为浮动流，只有一层，元素从左至右、从上至下排列；浮动后在标准流中的位置会空出来，后面的非浮动元素向上填充，若与浮动元素重叠，浮动元素会覆盖块级元素，但内容（内联）不会被覆盖，会见缝隙插入
　　父元素会塌陷
　　解决浮动影响的方式：
　　1，设定固定高度
　　2，overflow:hidden;溢出处理：隐藏；
　　　　overflow:visible; 默认溢出（不可可清除浮动）
　　　　overflow:scroll; 滚动（可清除浮动，但会添加滚动条）
　　3，清除浮动/扩展盒子高度
　　 　clear:both;清除左、右浮动
　　　 clear:left;清除左浮动
　　　 clear:right;清楚右浮动

　　overflow与clear的区别：
　　　overflow直接加在父元素，不能作用于绝对定位的元素
　　　clear用一个空标签来作用这个样式，增加网的大小（性能影响），任何元素、样式都可以使用clear清除浮动
　　　clear放在父元素里（扩展高度）、父元素外（不扩展高度）

应用+伪类选择器

<!--div#ID_${$qq}*3-->快捷方式    <div id="ID_1">1qq</div>    <div id="ID_2">2qq</div>    <div id="ID_3">3qq</div>

margin 0 auto;块级元素居中（上右下左）
text-align;行内元素居中