关于设置float的补充

最新推荐文章于 2022-11-21 23:03:04 发布

原创最新推荐文章于 2022-11-21 23:03:04 发布 · 876 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #float

HTML+CSS 专栏收录该内容

10 篇文章

订阅专栏

float不会遮盖文本,文本会显示出来。
这里写图片描述

代码：

 <style type="text/css">
        .{margin:0px;padding:0px;}
        #div1{
            /*height: 60px;*/ /*如果不定义高度，会随内容自己扩展*/
            /*width: 400px;*/
            width: 100%;
            margin:1px;  /*当块状元素设置了宽度之后，margin-right的值并没有起作用到*/
            border: 1px solid green;
            overflow: hidden;
        }
        #div2{
            border: 1px solid black;
            /*height: 60px;*//*设置了float属性后如果不设置高度的话会根据内容的高度变化*/
            /*width: 200px;*//*设置了float属性后如果不设置长度的话会根据内容的长度变化*/
            margin:2px;
            float:left;/*设置float属性，脱离文档流(不占用文档空间)，不再属于div1的内容*/
        }
        #div3{
            border: 1px solid orange;
            height: 60px;
            width: 200px;
            margin:2px;
            float:left;
        }
        #clear{
            clear: both;
            border: 1px solid pink;
        }
        #ps{
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div id="div1">我是div1的文本
        <div id="div2">我是div2</div>
        <div id="div3">我是div3</div>
        <p id="clear">我是clear</p><!--行内元素的宽度和高度一般由内容决定-->
    </div>
    <div>
        <span id="ps">span</span>
    </div>
</body>