1、什么定位
元素该出现的位置 分为以下几类:
普通流定位(文档流定位)
浮动定位
相对定位
绝对定位
固定定位
2、普通流定位 页面默认的定位方式
块级元素:从上到下显示
行内元素:从左到右显示
3、浮动定位
1、什么是浮动定位
元素会脱离默认文档流,在页面上不会占据空间 浮动定位的元素会放置在包含框的左边或者右边 浮动的元素依然在包含框内 当浮动元素碰到其他浮动元素时,就会停止浮动
2、浮动定位解决的问题 实现特殊的定位方式,比如:让多个块级元素在同一行内显示
3、属性 float 取值:
left : 左浮动
right : 右浮动
none : 无浮动
清除浮动所带来的影响:
属性: clear:left,right,both;
4、元素一旦浮动起来的话,那么都将成为块级元素
1、浮动 元素 对 父层元素带来的影响
影响:一个元素内如果包含了浮动元素,那么该元素的高度可能会变成0。
原因:浮动元素 脱离了 文档流,理论上讲,就不在父层容器内
解决方案:
1、显示设置父层元素的高度
2、通过overflow:hidden 来撑起父层元素的高度
1、显示方式
1、块级元素 <div></div> hn p
变成行级元素: display:inline-block
特点:单独占一行
2、内联元素/行内元素 span , b , i , u , s , a
变成块级元素:display:block
总结:
1. 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的, 那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行); 如果A元素上一个元素是标准流中的元素, 那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
2. 清除浮动可以理解为打破横向排列。
3. 对于CSS的清除浮动(clear),这个规则只能影响使用清除的元素本身,不能影响其他元素。