HTML&CSS(05)---CSS(4)浮动

 
  • 0 views

Unit Two: HTML&CSS(05)—CSS(4)浮动

1. 浮动（float）

通过浮动可以使一个元素向其父元素的左侧或右侧移动。

让页面中的元素可以水平排列。

  • float

    • 可选值
      • none默认值，元素不浮动。
      • left元素向左浮动。
      • right元素向右浮动。
    • 注意：元素设置浮动以后，水平布局的等式便不需要强制成立。

  • 特点

    1. 浮动元素会完全脱离文档流，不再占据文档流中的位置。
    2. 设置浮动以后，元素会向父元素左侧或右侧移动。
    3. 浮动元素默认不会从父元素中移出。
    4. 浮动元素不会盖住其他浮动元素，而是如同新建图层效果。
    5. 如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移。
    6. 浮动元素不会超过它上边的浮动兄弟元素，最多就是和它一样高。
    <!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* float: left; */
        }
  
        .box2 {
            width: 300px;
            height: 300px;
            background-color: orange;
            float: left;
        }
  
        .box3 {
            width: 400px;
            height: 400px;
            background-color: red;
            float: left
        }
    </style>
</head>
  
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  
    </div>
</body>
  
</html>

  • 浮动与文字

    • 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，所以我们可以利用浮动来设置文字环绕图片的效果。
    • 元素设置浮动以后，将会从文档流中脱离，元素特点也会发生变化：
      • 块元素：
        • 块元素不独占页面一行。
        • 块元素的高度和宽度被内容撑开。
      • 行内元素：
        • 行内元素脱离文档流后，特点和块元素一样。
    • 脱离文档流后，就没有块元素和行内元素区别了。

2. 导航条练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./reset style/reset.css">
    <title>Document</title>
    <style>
        ul{
            width: 1210px;
            background-color: aqua;
        }

        li {
            background-color: rgb(165, 164, 164); 
            float: left;

        }
        a{
            display: block;
            text-decoration: none;
            color: rgb(63, 60, 60);
            text-align: center;
            padding: 0px 39px;
            line-height: 48px;
            font-size: 18px;
        }

        li:hover {
            background-color: black;
        }
    </style>
</head>

<body>
    <ul>
        <li class="nav1"><a href="javascrpt:;">HTML/CSS</a></li>
        <li class="nav2"><a href="javascrpt:;">Browser Side</a></li>
        <li class="nav3"><a href="javascrpt:;">Server Side</a></li>
        <li class="nav4"><a href="javascrpt:;">Programming</a></li>
        <li class="nav5"><a href="javascrpt:;">XML</a></li>
        <li class="nav6"><a href="javascrpt:;">Web Building</a></li>
        <li class="nav7"><a href="javascrpt:;">Reference</a></li>
    </ul>
</body>
</html>```



## 3. 网页的布局

![](https://suntarliarzn-1258316859.cos.ap-chongqing.myqcloud.com/Web%20development%20for%20everybody/CSS/Unit%202/204%20layout/01%20layout.jpg){:height="40%" width="40%"}

​```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./reset style/reset.css">
    <title>Document</title>
    <style>
        header,
        main,
        footer {
            width: 500px;
            margin: 0 auto;
        }

        header {
            background-color: aqua;
            height: 100px;
        }

        main {
            background-color: rgb(255, 255, 0);
            margin: 10px auto;
            height: 300px;
        }

        nav,
        article,
        aside {
            height: 100%;
            float: left;
        }

        nav {
            width: 100px;
            background-color: rgb(172, 13, 13);
        }

        article {
            width: 280px;
            margin: 0px 10px;
            background-color: #0f64b8;
        }

        aside {
            width: 100px;
            background-color: #0edf31;
        }

        footer {
            background-color: blue;
            height: 100px;
        }
    </style>
</head>

<body>
    <header>

    </header>
    <main>
        <nav></nav>
        <article></article>
        <aside></aside>
    </main>
    <footer>

    </footer>
</body>

</html>

4. 问题：高度塌陷

  • 在浮动布局中，父元素的高度跟随子元素内容撑开。

    • 当子元素浮动后，其会完全脱离文档流。
    • 将会无法撑起父元素的高度，导致父元素的高度丢失。
    • 父元素高度丢失以后，其下的元素会自动上移，导致页面布局混乱。

  • BFC(Block Formatting Context) 块级格式化环境

    • BFC是CSS中的一个隐含属性，可以为一个元素开启BFC。
      • 开启BFC该元素会变成一个独立的布局区域。（相当于添加了一个图层。）
      • 开启BFC后，特点：
        1. 元素不会被浮动元素所覆盖。
        2. 子元素和父元素外边距不会重叠。
        3. 可以包含浮动的子元素。
    • 可以通过一些特殊方式开启元素的BFC：
      1. 设置元素浮动
      2. 元素设置为行内块元素（inline-block）
      3. 将元素overflow设置为~非visible
        • 元素设置为overflow:hidden

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 一个块格式化上下文由以下之一创建：

  • 根元素或其它包含它的元素
  • 浮动元素 (元素的 float 不是 none)
  • 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
  • 内联块 (元素具有 display: inline-block)
  • 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
  • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  • 具有overflow 且值不是 visible 的块元素，
  • display: flow-root
  • column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
  • 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

  • clear属性

    清楚浮动元素对当前元素所产生的影响。

    • 可选值
      • left: 清除左侧浮动元素对当前元素的影响。
      • right:清除右侧浮动元素对当前元素的影响。
      • both:清除两侧最大影响的那侧。
    • 原理
      • 设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。

  • 通过<clear>加伪元素选择器解决高度塌陷问题

    <!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./reset style/reset.css">
    <title>Document</title>
    <style>
        #box1 {
            border: 10px red solid;
        }
  
        #box2 {
            width: 300px;
            height: 300px;
            background-color: tomato;
            /*开启了BFC，相当于新建了图层,但是依然独占一行。*/
            /* overflow: hidden;; */
            float: left;
        }
  
        /*通过伪元素+clear解决高度塌陷问题*/
        #box1::after {
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>
  
<body>
    <div id="box1">
        <div id="box2">
        </div>
        <!-- <div id="box3">
        aa
    </div> -->
    </div>
  
</body>
</html>

  • 垂直方向相邻外边距重叠现象

    • 利用<display:table>+伪元素选择器

      <!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box1 {
        width: 200px;
        height: 200px;
        background-color: tomato;
        /* float: left;     */
    }
    
    /* #box1::before{
            content: "";
            clear: both;
            display: block;
            都不可行！！！
        } */
    /*添加一个看不见，并不占位的表格*/
    #box1::before {
        content: "";
        display: table;
    }
    
    #box2 {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background-color: orange;
        /* float: left;     */
    }
</style>
    
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
    
</html>

  • .clearfix轮子解决高度塌陷与外边距重叠，使内部元素能够自由浮动。

        .clearfix::before,
    .clearfix::after{
        content: "";
        display: table;
        clear: both;    }