CSS3基础（4）

浮动定位和背景样式

浮动

浮动实现并排

浮动的最本质功能：用来实现并排。
浮动的使用要点：需要浮动时，不能只给其中一个设置浮动，并排的盒子都需要设置为浮动。
父亲盒子需要有足够的宽度，否则儿子盒子会掉到下一行。

<style>
        .box {
            width: 900px;
            height: 300px;
            border: 5px solid #000;
        }
        .box1 {
            width: 300px;
            height: 300px;
            background-color: rgb(225, 241, 12);
            float: left;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(17, 151, 224);
            float:left;
        }
        .box3 {
            width: 300px;
            height: 300px;
            background-color: rgb(98, 255, 0);
            float:left;
        }
    </style>

	<div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

效果：

当父亲盒子内既有浮动的儿子盒子时，非浮动的盒子后面紧靠的如果是浮动盒子，则浮动的盒子在非浮动的盒子的下一行。浮动盒子的后面紧跟的如果时非浮动的盒子，则非浮动的盒子按照下层顺序显示。

浮动的顺序贴靠

儿子盒子会按照顺序进行贴靠，如果没有足够的空间，则会贴靠上一个兄弟盒子，如果还没有，则贴靠上上一个兄弟盒子，最后如果真的没有空间，就会贴靠大盒子的边。

	<style>
        .box {
            width: 900px;
            height: 200px;
            border: 5px solid #000;
        }
        .box1 {
            width: 700px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2 {
            width: 200px;
            height: 100px;
            background-color:  green;
            float: left;
        }
        .box3 {
            width: 200px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
    </style>

    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

效果：

注意：浮动元素一定可以设置width、height，浮动元素不在区分行内元素和块级元素。已经脱离了文档流，一律可以设置width、height，即使时span或a标签等。

右浮动

和左浮动相反，有浮动时按元素顺序向右边贴靠。
float:right;即可设置右浮动。

    <style>
        .box {
            width: 700px;
            height: 200px;
            border: 5px solid #000;
            
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            float: right;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: right;
        }
        .box3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: right;
        }
    </style>

	<div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>

效果：

使用浮动实现网页布局

垂直显示的盒子不要设置浮动，只有并排显示的盒子才设置浮动。
大盒子里套小盒子，小盒子里使用浮动。
不要吝惜盒子，多使用div。
示例：

<style>
        * {
            padding: 0;
            margin: 0;
        }
        header {
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            background-color: #333;
        }
        header .logo {
            float: left;
            width: 220px;
            height: 100px;
            background-color: orange;
        }
        header .login {
            float: right;
            width: 220px;
            height: 30px;
            background-color: orange;
        }
        nav {
            float: right;
            width: 600px;
            height: 20px;
            margin-top: 50px;
            background-color: orange;
        }
        .content {
            width: 1000px;
            height: 600px;
            margin: 20px auto;
            background-color: #333;
        }
        .content aside {
            float: left;
            width: 300px;
            height: 600px;
            background-color: rgb(29, 181, 241);
        }
        .content main {
            float: right;
            width: 680px;
            height: 600px;
            background-color: rgb(113, 229, 98);
        }
        .content main .banner {
            width: 680px;
            height: 460px;
            background-color: rgb(206, 127, 127);
        }
        .content main .pics {
            width: 680px;
            height: 120px;
            margin-top: 20px;
            background-color: rgb(241, 189, 66);
        }
        .content main .pics ul {
            list-style: none;
        }
        .content main .pics ul li {
            float: left;
            width: 150px;
            height: 120px;
            margin-right: 25px;
            background-color: rgb(90, 44, 158);
        }
        .content main .pics ul li:last-child {
            float: left;
            width: 150px;
            height: 120px;
            margin-right: 0;
            margin-left: 5px;
            background-color: rgb(90, 44, 158);
        }
        footer {
            width: 1000px;
            height: 100px;
            margin: 0px auto;
            background-color: #333;
        }
    </style>

	<header>
        <div class="logo"></div>
        <div class="login"></div>
        <nav></nav>
    </header>
    <section class="content">
        <aside></aside>
        <main>
            <div class="banner"></div>
            <div class="pics">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </main>
    </section>
    <footer></footer>

效果：

BFC规范

BFC（Box Formatting Context），块级格式化上下文，是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

当我们创建一个父盒子，但不设置盒子的height时，父盒子中的子盒子是浮动元素时，这个盒子无法被撑开。这就是因为父盒子没有BFC。

如何创建BFC

方法一：
  将 float 属性设置为 none 。

方法二：
  设置定位，使 position 的值不为 static(据对定位) 或 relative(固定定位)。

方法三：
  设置 display 的值为 inline-block 、flex 或者 inline-flex。

方法四：
  设置 overflow:hidden;

                                       

关于overflow:hidden;

overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏。是非常好用的让盒子形成BFC的方法。

BFC的其他作用

BFC可以取消盒子的margin塌陷。
BFC可以阻止元素被浮动元素覆盖。

浏览器差异

IE6、7浏览器使用hsalayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom: 1属性 “让盒子拥有layout”。

如果要制作兼容到IE6、7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性。