浮动

浮动

<!-- 浮动：简单来说，通过浮动可以使一个元素向其父元素的
        左侧或者右侧移动 float(气球)
        可选值：
            none 默认值，不浮动
            left 向左浮动
            right 向右浮动 
-->
<div class="box1"></div>

.box1{
    width: 200px;
    height: 200px;
    background-color: #bfa;
    float: right;
}
/* ①查看margin-right
    ※元素设置浮动之后，水平布局的等式便不需要强制成立了
   ②添加box2
    并且设置样式
  */
.box2{
    width: 200px;
    height: 200px;
    background-color: orange;
}
/* 可以看到是垂直排列的，但是我这时想要让他上去变到右边去,因为可以让水平布局的等式不满足，那么我们尝试将box1浮动 */
.box1{
    width: 200px;
    height: 200px;
    background-color: #bfa;
    float: left;
}
/* 此时我们观察到2没有了，然后我们修改2的宽高，可以发现，2上去了并且被1挡住了 */
/* 特点①：元素设置浮动之后，会完全从文档流中脱离，不在占用文档流的位置，所以在下面的还在文档流中的元素会自动向上移动
*/
/* 这个时候我想让box2也浮动，就要为2也设置float */
.box2{
    width: 200px;
    height: 200px;
    background-color: orange;
    float: left;
}

<!-- 在这时我新增一个box3，也为他设置浮动 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box3{
    width: 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{
    width: 100px;
    height: 100px;
    background-color: #bfa;
    /* float: left; */
}
/* 文字环绕图片的效果 */

简单的布局

<header></header>
<main></main>
<footer></footer>

header{
    width: 1000px;
    height: 120px;
    background-color: #bfa;
    margin: 0 auto;
}
main{
    width: 1000px;
    height: 500px;
    background-color: silver;
    margin: 0 auto;
}
footer{
    width: 1000px;
    height: 150px;
    background-color: #eee;
    margin: 0 auto;
}

<!-- 左侧导航 -->
<nav></nav>
<!-- 中间内容 -->
<div></div>
<!-- 右侧批注 -->
<aside></aside>

nav{
    width: 200px;
    height: 100%;
    background-color: orange;
}
div{
    width: 600px;
    height: 100%;
    background-color: pink;
}
aside{
    width: 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;
    width: 100px;
}
/* 此时想让inner元素水平排列，使用float */
/* 高度塌陷问题：
    浮动中，父元素的高度默认被子元素撑开，但当子元素浮动后，会完全脱离文档流，将无法撑起父元素的高度，导致父元素的高度丢失，这样之后，下面的元素会自动上移，导致页面布局混乱
*/
/* bfc：block formatting context 块级格式化环境
    开启bfc之后，该元素会变成一个独立的布局区域，开启bfc可以包含浮动的子元素
     将元素的overflow设置为非visible 通常是hidden
     bfc的演示
        2种:被覆盖的兄弟，内
*/