浮动
- 作用
浮动的作用就是使元素并排显示 - 特点
第一个盒子会紧贴父盒子边,第二个浮动的盒子会贴第一个浮动的盒子… 依次类推 - 特性
脱离标准文档流
收缩的效果
字维
设置浮动,任意的标签 都可以设置宽高 - 要浮动一起浮动,有浮动,清除浮动
- 浮动带来的影响:浮动使元素脱离了标准文档流,元素不占文档的位置,撑不起父盒子的高度,影响页面布局
- 清除浮动的方式
给父盒子设置固定高度
内墙法,在浮动元素的后面加一个空的块级标签,并设置类clearfix设置clear:both,清除浮动
给父元素设置overflow:hidden
伪元素法,在元素后面添加一个伪元素
.box:after{
content:’.’;
clear:both;
display:block;
visibility:hidden;
height:0;
}
display
.box{
display:inline/inline-block/block/none
<!--
inline:设置标签为行内元素
inline-block:设置标签为行内块元素
block:设置标签为块级元素
none:隐藏
-->
}
设置居中
在标准文档流下设置盒子居中使用margin:0 auto;
浮动的盒子设置居中的方法:给浮动的元素添加一个父级元素,父级元素的宽度与浮动的元素的宽度一样,然后清除浮动,在给父盒子设置margin:0 auto;
<!--添加的父元素-->
.father{
with: 100px; <!--与浮动的元素宽度一样-->
overflow:hidden;
margin:0 auto;
}
<!--浮动的元素-->
.child{
width:100px;<!--与父盒子的宽度一样-->
height:100px;
float:left;
}
文本水平居中:text-align:center;
文本垂直居中:行高=盒子的高度(height=line-height)
使盒子脱标的方式
- 浮动
- 绝对定位
- 固定定位