lovecoding
/
W250913


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!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>
        .item{
            width: 100px;
            height: 100px;
            background-color: red;

            /* 元素的高度默认会被内容撑开 */

            /* 如果容器内部元素浮动 容器的高度会消失 ：脱离文档流 */

            /* 浮动属性可以块元素横向排列 left左浮动 right右浮动 */
            float: left;

            /* display: inline-block; */
            /* 让元素变为行内块元素 */
            /* 如果行块元素横向排列元素之间会有空隙 这个是空隙是回车符 */
        }
        .box{
            width: 800px;
            /* height: 100px; */
            border:1px dashed black;
            margin: 0 auto;
        }
        /* p{
            /* 清除浮动 */
            /* clear: both; */
        /* }  */

        /* 伪元素选择器 ::after */
        /* 伪元素选择器可以实现向标签中加入一个虚假的标签 */
        /* 通过伪元素选择器插入的假标签 属于行元素 */
        .box::after{
            /* content 属性 必须要写 他是负责向标签中插入假标签并填写内容的 */
            content:"";
            clear: both;
            display: block;

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <!-- <p></p> -->
    </div>
</body>
</html>