10.布局—中-灵析社区

八、什么是浮动，如何清除浮动？

定义

在默认布局流中，浮动元素脱离文档流，沿内联布局的开始或结束位置放置

与绝对和固定定位不同，浮动元素的宽高、内外边距和边框，依然影响相邻元素的位置，相邻元素环绕浮动元素流式布局

创建

float不为none即可创建浮动元素
弹性布局的父元素不能浮动

清除浮动

浮动元素脱离文档流，只包含浮动元素的父元素高度为0，带来问题

父元素高度不会随内容高度变化，内外边距、边框和背景无法自适应内容
父元素后的元素，与父元素内的浮动元素重叠
父元素后的元素，外边距属性无效

解决问题的思路：

设置高度

通过JS将父元素高度设为获取浮动元素的最大高度

通过CSS将父元素高度height设置固定值，然后设置溢出属性overflow，裁剪超出高度的部分或添加滚动条

清除浮动

通过HTML在父元素内部末尾添加清除浮动的元素

<style>
.box > div {
float: left;
width: 33.33%;
}
.clearfix {
clear: both;
}
.margin-top {
margin-top: 10px;
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
<div class="clearfix"></div>
</div>
<div class="margin-top"></div>

通过CSS在父元素内部末尾添加请出浮动的伪元素

<style>
.box::after {
/** 清除浮动 **/
content: '　';
display: block;
clear: both;
/** 隐藏 **/
visibility:hidden;
width:0;
height:0;
/** 隐藏：兼容IE低版本 **/
line-height: 0;
}
.margin-top {
margin-top: 10px;
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<div class="margin-top"></div>

通过HTML在父元素下边添加清除浮动的元素（解决外边距问题）

<style>
.box > div {
float: left;
width: 33.33%;
}
.clearfix {
clear: both;
}
.margin-top {
margin-top: 10px;
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
<div class="clearfix"></div>
<div class="margin-top"></div><!-- 清除浮动后，外边距生效 -->

九、什么是滚动穿透，如何解决？

滚动穿透是在移动端，尤其是 iOS 中，弹出模态框，用户模态框中的滚动/滑动操作，穿过弹窗，导致页面滚动的现象

滚动穿透不是 BUG，只是运行环境对溢出、滑动事件处理略有差异

示例：

<style>
body {margin:0;}
.fixed {
overflow: auto;
margin: auto;
position: fixed;
width: 50vw;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #efefef;
}
.content, .list {
height: 100vh;
background-image: linear-gradient(to bottom, #efefef, #000);
}
.list {
height: 200vh;
}
</style>
<body>
<div class="list"></div>
<div class="fixed">
<div class="content"></div>
</div>
</body>

请在真实的移动浏览器中，滑动中间的弹窗，你可能会发现页面也跟随滚动

具体表现因浏览器而异

在 CSS 中，有两个属性：

pointer-events: none禁止元素成为鼠标事件的目标对象
touch-action: none禁止元素响应任何触摸事件

它们都不能阻止滚动事件，冒泡到父级，让父级继续滚动

解决滚动穿透问题，比较的流行的方法是：

当模态框弹出时，通过position:fixed创建层叠上下文，让不该滚动的父级的脱离文档流，设置width:100%保留宽度，并将body的卷曲高度保存起来。
当模态框关闭时，通过position:static，让父级回归文档流，恢复之前的卷曲高度，即滚动位置

让我们解决示例的滚动穿透问题：

<style>
body {margin: 0;}
.modal {
display: none;
overflow: auto;
margin: auto;
position: fixed;
width: 50vw;
height: 50vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #efefef;
}
.content, .list {
height: 100vh;
background-image: linear-gradient(to bottom, #efefef, #000);
}
.list {
height: 200vh;
}
.open, .close {
position: fixed;
text-align: center;
}
</style>
<body>
<div class="open">打开</div>
<div class="list"></div>
<div class="modal">
<div class="close">关闭</div>
<div class="content"></div>
</div>
</body>
<script>
var openBt = document.querySelector('.open'),
closeBt = document.querySelector('.close'),
modal = document.querySelector('.modal'),
list = document.querySelector('.list'),
scrollTop = 0
openBt.onclick = function() {
scrollTop = document.body.scrollTop || document.documentElement.scrollTop
modal.style.display = 'block'
list.style.cssText = 'position: fixed; width: 100%; top: -' + scrollTop + 'px'
}
closeBt.onclick = function() {
modal.style.display = 'none'
list.style.cssText = 'position: static;'
window.scroll({ top: scrollTop })
}
</script>

十、多方法实现水平居中

text-align: center适合内联或内联块元素的父元素设置
position:staic

margin: 0 auto适合宽度已知元素

块元素display:block宽度固定width:100px

块元素display:block宽度自适应内容width:fit-content

表格元素display:table

position:relative/position:absolute/position:fixed/position:sticky脱离文档流后

偏移left:50%或right:50%

margin-left或margin-right设置宽度一半

transform: translateX(-50%)

偏移left:0和right:0

宽度固定width:100px或自适应width:fit-content

margin: 0 auto

display:flex父元素

justify-content: center每行内部元素沿主轴居中排列

十一、多方法实现垂直居中

内联父元素

line-height: 100px行高固定值

内联块或块元素

line-height等于元素height

padding-top等于padding-bottom

内联或内联块元素

vertical-align: middle元素与行的基线+字母x的高度的一半对齐

表格单元格元素：display: table-cell或<td>

vertical-align: middle内容或子元素垂直居中

position:staic

margin-top: 50%适合宽度已知元素transform: translateY(-50%)

块元素display:block高度固定height:100px

块元素display:block宽度自适应内容height:fit-content

表格元素display:table

position:relative/position:absolute/position:fixed/position:sticky脱离文档流后

偏移top:50%或bottom:50%

margin-top或margin-bottom设置高度一半

transform: translateY(-50%)

偏移top:0和bottom:0

宽度固定height:100px或自适应height:fit-content

margin: auto 0

display:flex父元素

align-content: center多行内部元素整体沿交叉轴居中排列

align-items: center每行内部元素整体沿交叉轴居中排列

align-self: center单个内部元素沿交叉轴居中排列

十二、多方法实现高度 100% 撑满视窗

如果视窗高度是变化的，纯CSS撑满视窗，可以用相对单位

百分比

百分比相对于父元素设置，height默认为auto，即内容高度

从根元素html向内到body，高度都设置为height:100%

<style>
html, body {
height: 100%;
}
div {
  height: 100%;
  background-color: azure;
}
body { margin: 0; }
</style>
<div></div>

vh，直接设置相对视窗高度

<style>
div {
  height: 100vh;
  background-color: azure;
}
body { margin: 0; }
</style>
<div></div>

如果对于内容高度，多用视窗高度减去固定元素高度（如导航栏，状态栏），可用函数calc()

calc(100% - 50px)
calc(100vh - 50px)

十三、圣杯布局

在弹性布局以前，圣杯布局是通过浮动和定位实现三栏布局的一种方案之一

圣杯布局的特点：

上下为通栏，下通栏清浮动
中间为三栏布局，子元素按中左右的顺序浮动float:left

宽度

左边栏宽度固定 = 父元素的左内边距padding-left

右边栏宽度固定 = 父元素的右内边距padding-right

中间内容宽度 = 100%

位置

左右边栏相对定位position:relative

左边栏左外边距margin-left: -100%，right:宽度

右边栏左外边距margin-left:-宽度，right:-宽度

注意

需设置最小宽度min-width，避免视窗宽度过小，浮动错位

<style>
body { margin: 0; }
div {
  text-align: center;
  color: #fff;
}
.header, .footer {
  height: 50px;
  background-color: pink;
  line-height: 50px;
}
.content {
  padding-left: 200px;
  padding-right: 150px;
  min-width: 500px;
  line-height: 500px;
}
.content > div {
  float: left;
  height: 500px;
}
.center {
  width: 100%;
  background-color: mediumturquoise;
}
.left, .right {
  position: relative;
}
.left {
  width: 200px;
  right: 200px;

十四、双飞翼布局

双飞翼布局由淘宝UED发扬，是通过浮动和定位实现三栏布局的一种方案之一

双飞翼布局的特点：

上下为通栏，下通栏清浮动
中间为三栏布局，子元素按中左右的顺序浮动float:left

宽度

左边栏宽度固定 = 中间内容子元素左外边距margin-left

右边栏宽度固定 = 中间内容子元素右外边距margin-right

中间内容宽度 = 100%

位置

左边栏左外边距margin-left: -100%

右边栏左外边距margin-left:-宽度

<style>
body { margin: 0; }
div {
  text-align: center;
  color: #fff;
}
.header, .footer {
  height: 50px;
  background-color: pink;
  line-height: 50px;
}
.content > div {
  float: left;
  height: 500px;
  line-height: 500px;
}
.center {
  width: 100%;
  background-color: mediumturquoise;
}
.inner {
  height: 500px;
  margin-left: 200px;
  margin-right: 150px;
}
.left {
  margin-left: -100%;
  width: 200px;
  background-color: skyblue;
}
.right {
  margin-left: -150px;
  width: 150px;
  background-color: lightsteelblue;
}
.footer {
c  lear: both;
}
</style>
<div class="header">header</div>
<div class="content">
<div class="center">
<div class="inner">center-inner</div>
<div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer">footer</div>