2018.12.9浮动布局,盒子显隐,定位,z-index,流式布局,小米开头-优快云博客

本文深入解析浮动布局原理，包括块级元素如何在同一行排列，浮动布局对盒模型的影响，以及如何通过清浮动解决父级高度塌陷问题。同时，探讨了浮动布局下子元素宽度与高度的设置策略。

一浮动布局的总结(昨天作业)

1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度

一.1代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复习预习</title>
    <!-- 1.总结display -->

    <!-- 2.浮动 -->
    <!-- 让块级标签在父级可利用的宽度(width)中进行同行排列 -->
    <!-- 针对block-level box进行布局 -->
    <!-- float: left | right => BFC 左 | 右 => marging-left | margin-right -->
    <!-- 在浮动的基础上进行盒模型布局 -->

    <!-- 3.清浮动 -->
    <!-- 浮动后的标签不再撑开父级高度,让父级获得一个合适的高度 -->
    <style type="text/css">
        /* (.sup>.sub)+.brother */

        .sup {
            /*设置固定高度*/
            height: 200px;
        }
        .brother {
            clear: both;
        }
        .sup {
            overflow: hidden;
        }
        .sup:after {
            content: "";
            display: block;
            clear: both;
        }

    </style>
    
    
    <!-- 今日 -->
    <!-- 浮动布局的作业 -->
    <!-- 盒子的显隐控制 -->
    <!-- 定位布局 ***** -->
    <!-- 流式布局思想 -->
    
    <style type="text/css">
        /*对于浮动布局,需要设置父级的宽度吗?需要设置父级的高度吗?*/
        /*宽度: 一定需要, 因为父级宽度是子级浮动的显示范围*/
        /*高度: 不需要设置, 高度由清浮动来处理*/

        /*需要设置子级的宽度吗?高度呢?*/
        /*子级的宽高均需要自身设置*/

        .box1 {
            width: 1000px;
            margin: 0 auto;

        }
        .box1:after {
            content: "";
            display: block;
            clear: both;
        }