HTML/CSS基础-CSS常用布局方式
浮动-float
浮动布局和定位布局是两种常用的布局方式(兼容性较好)。
flex方式(部分浏览器兼容较好)
float: left | right | none
多用于页面布局
清除浮动
- 父元素添加overflow:hidden
子元素浮动会造成父元素高度坍塌
解决方法:父元素添加overflow:hidden - clear:both
子标签使用了float时,父标签的style中样式失效
<div style="background-color:red">
<div style="float: left">div1</div>
</div>
解决办法:clear : both
<div style="background-color:red">
<div style="float: left">div1</div>
<div style="clear: both;"></div>
</div>
- 父元素添加伪类after(与2类似)
<div style="background-color:red" class="cc">
<div style="float: left">div1</div>
<div style="clear: both;"></div>
</div>
.cc:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
- 双伪类
<div style="background-color:red" class="cc">
<div style="float: left">div1</div>
<div style="clear: both;"></div>
</div>
.cc:after
.cc:before{
content: ".";
display: block;
clear: both;
}
定位-position
position:fixed
常用于网页顶端固定导航栏和两侧菜单栏
此时该div不会占一整行,一般需要手动定义宽度 width:100%…
position:relative
position:absolute
常用于调整div之间相对位置
弹性布局-Flexible Box(Flex)
- 子元素的float clear vertical-align属性将时效
- 容器的属性有6个
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
见大佬的动画详解Flex6个属性