浮动
<!-- 浮动：简单来说，通过浮动可以使一个元素向其父元素的
左侧或者右侧移动 float(气球)
可选值：
none 默认值，不浮动
left 向左浮动
right 向右浮动
-->
<div class="box1"></div>
.box1{
200px;
height: 200px;
background-color: #bfa;
float: right;
}
/* ①查看margin-right
※元素设置浮动之后，水平布局的等式便不需要强制成立了
②添加box2
并且设置样式
*/
.box2{
200px;
height: 200px;
background-color: orange;
}
/* 可以看到是垂直排列的，但是我这时想要让他上去变到右边去,因为可以让水平布局的等式不满足，那么我们尝试将box1浮动 */
.box1{
200px;
height: 200px;
background-color: #bfa;
float: left;
}
/* 此时我们观察到2没有了，然后我们修改2的宽高，可以发现，2上去了并且被1挡住了 */
/* 特点①：元素设置浮动之后，会完全从文档流中脱离，不在占用文档流的位置，所以在下面的还在文档流中的元素会自动向上移动
*/
/* 这个时候我想让box2也浮动，就要为2也设置float */
.box2{
200px;
height: 200px;
background-color: orange;
float: left;
}
<!-- 在这时我新增一个box3，也为他设置浮动 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
.box3{
200px;
height: 200px;
background-color: red;
float: left;
}
/* 可以观察到这3个box也排列着 */
/*
浮动作用：让我们的元素横向排列、并排排列
特点：②设置浮动以后元素会向父元素的左侧或者右侧移动
③浮动元素默认不会从父元素中移出，移动，边界是父元素的最左最右
把2float、3注释掉，而 box2开始float的时候，不会移动到最左侧，而是box1的右边
④浮动元素向左或向右移动时，不会超过她前边的其他浮动元素
此时取消box1的float我们会发现，红色的没有上去，所以可以看出
⑤如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移，没有浮动的元素对浮动元素来说相当于一堵墙，永远移不上去
恢复1的float屏幕变窄的时候，3被挤下来了，之后呢 我们将3的float改成right，拉动屏幕
⑥浮动元素不会超过上边的浮动的兄弟元素，最多和她一样高
*/
<div class="box"></div>
<p>Lorem</p>
/* ⑦浮动元素不会盖住文字 */
.box{
100px;
height: 100px;
background-color: #bfa;
/* float: left; */
}
/* 文字环绕图片的效果 */
简单的布局
<header></header>
<main></main>
<footer></footer>
header{
1000px;
height: 120px;
background-color: #bfa;
margin: 0 auto;
}
main{
1000px;
height: 500px;
background-color: silver;
margin: 0 auto;
}
footer{
1000px;
height: 150px;
background-color: #eee;
margin: 0 auto;
}
<!-- 左侧导航 -->
<nav></nav>
<!-- 中间内容 -->
<div></div>
<!-- 右侧批注 -->
<aside></aside>
nav{
200px;
height: 100%;
background-color: orange;
}
div{
600px;
height: 100%;
background-color: pink;
}
aside{
200px;
height: 100%;
background-color: royalblue;
}
/* 此时是垂直布局，每个都填float */
/* 加个margin:0 auto */
高度塌陷问题&bfc
<!-- 假如我们将元素的高度写死了，那么当它的子元素过大或过小时就会出问题,所以希望父元素可以根据子元素的大小变化
-->
<div class="outer">
<div class="inner"></div>
<!-- <div class="inner"></div> -->
</div>
.outer{
border: 10px solid red;
}
.inner{
height: 100px;
background-color: #bfa;
100px;
}
/* 此时想让inner元素水平排列，使用float */
/* 高度塌陷问题：
浮动中，父元素的高度默认被子元素撑开，但当子元素浮动后，会完全脱离文档流，将无法撑起父元素的高度，导致父元素的高度丢失，这样之后，下面的元素会自动上移，导致页面布局混乱
*/
/* bfc：block formatting context 块级格式化环境
开启bfc之后，该元素会变成一个独立的布局区域，开启bfc可以包含浮动的子元素
将元素的overflow设置为非visible 通常是hidden
bfc的演示
2种:被覆盖的兄弟，内
*/