CSS布局技巧：圆角、浮动、清除浮动与标准流,-优快云博客

<style>
        /* * {
            margin: 0px;
            padding: 0px;

        } */

        div {
            width: 300px;
            height: 300px;
            /* border-radius: 50%; */

            background-color: plum;
            margin: 100px auto;
            box-shadow: 10px 10px 15px 10px rgb(0, 0, 0, .3);
            /* 五个参数 */
            text-shadow: 10px 10px 10px red;
            /* margin和box-shadow以及text-shadow参数间千万别加逗号 */

        }

        /* div:hover { */
    </style>

浮动

标准流

（普通流/文档流）
标签按照规定好默认方式排列

1）块级元素独占一行，从上向下顺序排列 div，p，h1-h6，ul，ol

2）行内元素按照顺序，从左到右顺序排列：span，a，em

问题：1. 用标准转换为行内块会有自动带的间距
2. 如何实现盒子的左右对齐
采用浮动可以让块级元素一行排列显示

<strong>多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动</strong>

float属性用于创建浮动框，移动到一边，直到左边缘或右边缘
选择器 {float:属性值;}

脱离标准流控制（浮）移动到指定位置（动）
浮动的盒子不再保留原先的位置，浮动盒子上边缘对齐，父元素管上下，子元素管左右

不管原来是p还是span，变成float后，都变成行内块元素
行内块元素，给多少内容撑开多大
块级元素如果没给宽度，默认和父级元素一样大

<strong>先设置盒子大小，再设置盒子位置</strong>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document5</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 1226px;
            height: 615px;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: rebeccapurple;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: blue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>




</body>

</html>

思路：背面大盒子，包括了margin，小盒子先定大小再定margin,先margin-left,再margin-bottom

案例：主要一方面是直接中间指定margin: 10px auto，就上下空出10px了

然后用ul和li时候有个list-style以及用了ul和li就不要画蛇添足写div了，然后设置margin-right时候最后一个盒子掉下去就该给最后一个指定类名，此时css里标签应该是.box .r中间别带上li

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document5</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {

            width: 980px;
            height: 300px;
            margin: 0 auto;
            background-color: pink;

        }

        .box li {
            float: left;
            height: 300px;
            width: 237px;
            background-color: gray;
            margin-right: 10px;

        }

        .box .r {
            margin-right: 0;
            /* 好神奇啊，我之前写的 .box li .r就辨别不出，把li删了就可以了 */
        }

        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>

    <div class="top">top</div>
    <div class="banner">banner
    </div>


    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="r">4</li>
    </ul>
    <div class="footer">footer</div>





</body>

</html>

并不是所有浮动都会压住标准流，只会压住后面的标准流，前面的标准流自己已经霸占一行了

因此：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

一个元素浮动，其余兄弟元素也要浮动

前面浮动元素有一个标准流父元素，他们都是有高度的
但是所有父元素都要有高度吗：不能

1.新增内容，不知道产品个数
2.新闻，有的长有的短
理想状态让子盒子撑开父亲

不给父盒子高度：加了浮动后父元素高度变成0了

清除浮动

清除浮动本质：清除浮动元素造成的影响，闭合浮动，只限制到父元素
当父盒子本身有高度，不用清除浮动
清除浮动后，父级根据浮动盒子自动检测到高度

1）额外标签法，隔墙法

浮动元素末尾加空标签

.clear {
clear: both;
}

<div class="clear"></div>

但是：添加无意义标签，结构差，新添加元素必须是块级

2）父级添加overflow

父级盒子加上 overflow: hidden(子不教，父之过)

3）父级添加after

伪元素默认为行内元素，必须有content属性

.clearfix:after {
	content:"";
	display: block;
	height: 0;
	clear: both;
	visibility:hidden;
}
.clearfix {
	*zoom: 1;
}

<div class="box clearfix"></div>

*zoom那段是防止不兼容的

4）父级双伪元素

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

.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom:1
}

<div class="box clearfix"></div>

最后的div同上