HTML学习笔记——浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>display</title>
    <style>
        p{
            width:100px;
            height:100px;
            border:1px solid red;
            display:inline;/* inline:为行内元素的默认值,显示为行内元素：能让块元素有行内元素的特性 */
            /* display:inline-block;行内块元素,既有块元素的特征也有行内元素的特征 */
        }
        span{
            width:100px;
            height:100px;
            border:1px solid red;
            display:block;/* block:为块元素的默认值,显示为块元素：能让行内元素有块元素的特性 */
        }
        strong{
            width:100px;
            height:00px;
            border:1px solid red;
            display:none;/* none设置元素不会被显示 */
        }
        ul li{
            width:100px;
            height:100px;
            border:1px solid red;
           /*  display:inline-block这个会解析空格li里面的每个元素之间都有空格;
            padding:0px;内边距
            margin:0px;外边距  */
            float:left;/* 左浮动(右浮动)：可以让块元素排在一行, float浮动以后元素会脱离文档流会对周围的元素产生影响 */
            list-style: none;/* 去掉小圆点 */
        }
        ul{
            padding:0px;
            margin:0px;
        }
        .clear:after{/* 通过在浮动后面加上一段空的东西,再去除浮动 */
            content:'';
            display:block;
            clear:both;

        }
        #father{
            border:1px solid red;/* 由于浮动导致父级塌陷 */
            overflow:hidden;/* overflow: 溢出处理,包括：visible(默认):内容不会被修剪,会呈现在盒子之外;hidden:内容会被修剪;scroll和auto:会被修剪但是可以拖动查看; */
        }

    </style>
</head>
<body>
    <p>我是块元素</p>
    <span>我是行内元素</span>
    <strong>你看不见我哦</strong>
    <div id="father" class="clear">
        <ul>
        <li>梨子</li><!-- 这个后面到下一行之间的空格会被inline-block解析成一个空格 -->
        <li>香蕉</li>
        <li>苹果</li>
        <li>菠萝</li>
    </ul>
    </div>

    <h5>清除浮动后的效果</h5>
</body>
</html>
HTML学习笔记——浮动

猜你喜欢
