Mick's Blog

Appearance

Return to top
On this page

布局

定位浮动

浮动的影响还有原理

影响：不受原有文档流的影响，同时无法影响原有父类，高度塌陷

原理：浮动元素脱离文档流，不占据空间，

浮动停留的条件？浮动元素移动遵循的空间？

条件：浮动元素碰到包含他的边框或者其他浮动元素的时候会停留

浮动元素可以左右移动，浮动元素高度独立，不会再影响撑开原有父类的高度

如何解决高度塌陷？

  • 给父类设置高度
  • 浮动元素之后，加一个 div,并且设置clear:both 不让当前浮动的状态延续下去
  • 父标签overflow:hidden --bfc
  • 用伪元素模拟 div,并设置clear:both

如何创建 BFC, 以及如何解决相应的一些问题？

创建 BFC 的条件

  • 根元素 body
  • 元素设置浮动：float 除了 none 之外
  • position: absolute 脱离文本流
  • display: inline-block table-cell table-caption flex
  • overflow: hidden auto scroll

BFC 特点

  • 垂直方向上，自上而下排列的，和文档流的排列方式一致
  • BFC 中上下相邻的两个容器 margin 会重叠
  • 计算 BFC 的高度时，要计算浮动元素的高度
  • BFC 不会影响外部元素

BFC 正作用

  • 解决 margin 重叠的问题
  • 解决高度塌陷
  • 创建自适应布局

手写实现

实现一个左边宽度固定，右侧宽度自适应的两列布局

浮动 + 生成 BFC 不重叠
html
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>
css
.left {
  width: 100px;
  height: 100px;
  background: #f66;
  float: left;
}

.right {
  height: 200px;
  overflow: hidden;
  background: yellow;
}
浮动 + width: auto
html
<div class="container">
	<div class="left"></div>
	<div class="right"></div>
</div>
css
.container {
	height: 200px;
}

.left {
	width: 100px;
	height: 100px;
	background: #f66;
	float: left;
}

.right {
	margin-left: 100px;
	height: 200px;
	width: auto;
	background: yellow;
}
flex大法
html
<div class="container">
	<div class="left"></div>
	<div class="right"></div>
</div>
css
.container {
	height: 200px;
	display:flex;
}

.left {
	width: 100px;
	height: 100px;
	background: #f66;
}

.right {
	flex: 1;
	height: 200px;
	background: yellow;
}

实现一个左右两栏宽度固定，中间自适应

html
<div class="container">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

绝对布局

css
.container {
	height: 200px;
	position: relative;
}

.left {
	position: absolute;
	width: 100px;
	height: 100px;
	background: #f66;
}

.right {
	position: absolute;
	width: 200px;
	height: 200px;
	background: yellow;
	top: 0;
	right: 0;
}

.center {
	margin-left: 100px;
	margin-right: 200px;
	height: 200px;
	background-color: aquamarine;
}

flex

css
.container {
	height: 200px;
	display:flex;
}

.left {
	width: 100px;
	height: 100px;
	background: #f66;
}

.right {
	width: 200px;
	height: 200px;
	background: yellow;
}

.center {
	flex:1;
	height: 200px;
	background-color: aquamarine;
}

圣杯布局

html
<div class="container">
	<div class="center"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>
css
.container {
	padding-left: 100px;
	padding-right: 200px;
}

.left {
	float: left;
	margin-left: -100%;
	position: relative;
	left: -100px;
	width: 100px;
	height: 100px;
	background: #f66;
}

.right {
	float: left;
	margin-left: -200px;
	position: relative;
	right: -200px;
	width: 200px;
	height: 200px;
	background: yellow;
}

.center {
	float: left;
	width: 100%;
	height: 200px;
	background-color: aquamarine;
}

双飞翼

html
<div class="container">
	<div class="center">
		<div class="wrap"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
</div>
css
.container {
	height: 400px;

}

.center {
	float: left;
	width: 100%;
	height: 200px;
}

.left {
	float: left;
	margin-left: -100%;
	width: 100px;
	height: 200px;
	background-color: bisque;
}

.right {
	float: left;
	margin-left: -200px;
	width: 200px;
	height: 200px;
	background-color: blue;
}

.wrap {
	margin-left: 100px;
	margin-right: 200px;
	height: 100%;
	background-color: aqua;
}