【浮动、flex】-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45871539/article/details/144586692
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动、flex</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;

            float:left;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: pink;

            float:left;
        }
        .product{
            margin: 50px auto;

            width: 1226px;
            height: 628px;
            background-color: pink;
        }
        .left{
            float: left;

            width: 234px;
            height: 628px;
            background-color:blue;
        }
        .right{
            float: right;

            width: 978px;
            height: 628px;
            background-color:orange;
            
        }
        .right li{
            float:left;
            margin-right: 14px;
            margin-bottom: 14px;

            width: 234px;
            height: 300px;
            background-color: brown;
        }
        .right li:nth-child(4n){
            margin-right: 0;
        }
    </style>
</head>
<body>
    <!-- 
        标准流：也叫文档流默认排布规则
     -->
     <!-- 
        浮动：让块级水平排列；行内块显示；不加的话会认为加的不存在，要浮动都浮动，不然会脱标
            float：left、right
      -->
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="product">
            <div class="left"></div>
            <div class="right">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    <!-- 
        清除浮动:脱标，父级没有高度，子级无法撑开父级高度导致页面布局错乱
        方法：清除浮动
            1.额外标签法：在父级元素内容的最后添加一个块级元素，设置CSS属性clear：both
            2.单伪元素法：
                .clearfix::after{
                    content:"";
                    display:block:
                    clear:both:
                }
            3.双伪元素法：
                .clearfix::before，
                .clearfix::after{
                    content:"";
                    display:table:
                    clear:both:
                }
                .clearfix::after{
                    clear:both:
                }
            4.父级添加overflow：hidden
     -->
    <!-- 
        flex组成：
            给父级元素display：flex，子元素可以自动挤压\拉伸
                弹性容器；弹性方盒子；主轴：水平；侧轴、交叉轴：垂直方向；
            主轴对齐方式：justify-content
                flex-start：弹性盒子从起点开始一次排列
                flex-end：从中点开始
                center：沿主轴剧中排列
                space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
                space-around：弹性盒子沿主轴均匀排列，空自间距均分在弹性盒子两侧
                space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
            侧轴：align-items；某个盒子侧轴对其：align-self
                stretch：弹性盒子沿着侧轴线被拉伸至铺满容器（弹性遏制没有设置侧轴方向尺寸，则默认拉伸）
                center：沿侧轴居中排列
                flex-start：弹性盒子从起点开始一次排列
                flex-end：从中点开始
            修改主轴方向：flex-direction（默认水平）
                column:垂直方向，从上向下
                column-reverse：垂直方向，从右向左
            弹性伸缩比：flex
                属性值：整数数字，表示占用父级剩余尺寸的份数。
                默认主轴方向靠内容撑开，侧轴默认拉伸。
            弹性盒子换行：flex-wrap
            行对齐方式：align-content，对单行不生效
                flex-start：弹性盒子从起点开始一次排列
                flex-end：从中点开始
                center：沿主轴剧中排列
                space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
                space-around：弹性盒子沿主轴均匀排列，空自间距均分在弹性盒子两侧
                space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

     -->
</body>
</html>