浮动 学习打卡

又是学习的一天

浮动
display属性排版
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
liline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
liline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none 设置元素不会被显示
特性
块级元素与行级元素的转变
控制块元素排到一行
控制元素的显示和隐藏

float浮动属性

clear清除浮动属性
left 清除左侧
right 清除右侧
both 清除l两侧
none 允许两侧出现

边框塌陷
设置父元素高度
父级添加overflow属性
visible 默认值。内容不会被修剪，会呈现在盒子之外

hidden 内容会被修剪，并且其余内容是不可见的

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
父级添加伪类
.clear:after{
content: ‘’; /在clear类后面添加内容为空/
display: block; /把添加的内容转化为块元素/
clear: both; /清除这个元素两边的浮动/
}

display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式