2021-10-08

浮动-float

浮动布局和定位布局是两种常用的布局方式(兼容性较好)。
flex方式（部分浏览器兼容较好）

float: left | right | none
多用于页面布局

清除浮动

1. 父元素添加overflow:hidden
   子元素浮动会造成父元素高度坍塌
   解决方法：父元素添加overflow:hidden
2. 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>

3. 父元素添加伪类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;
}

4. 双伪类

<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个属性