display:inline-block; // 内联块
float:浮动
特性:
1、浮动的元素排在一排;
2、浮动的元素内容撑开宽度;
3、浮动的元素支持所有css样式;
4、浮动的元素脱离文档流;
5、浮动的元素提升层级半级。
文档流:文档中可显示对象在排列时所占的位置。
1、overflow:溢出
会重新计算元素的空间;
hidden: 溢出隐藏;
auto: 溢出展示滚动条;
2、元素的居中
margin: 0 auto;
3、元素的伪类
伪类:一些元素身上的特殊css属性(效果);
:hover 鼠标悬停
:after 在元素内容之后插入一些内容;
浮动:其实就是使元素脱离文档流,按照一定的方式排列,遇到相邻的浮动元素或者父级的边界停下来。
BFC:就是清浮动,用来处理元素脱离文档流的问题;
1、父级也浮动;
弊端:左右的margin: 0 auto;会失效;
2、父级加display:inline-block;
弊端:左右的margin: 0 auto;会失效,如果需要居中。可以给父级加text-align:center;
3、父级加height;
弊端:扩展性不好;
4、br标签 (不符合w3c规范)
写法:<br />
作用:换行
5、clear (不符合w3c规范)
元素的某一方向不允许出现其他的浮动元素;(left/right/both/one)
6、伪类的清浮动
:afer {
content: "";
display: block;
clear: both;
}
温馨提示:目前主流方法,建议使用。