html之div学习记录1

最新推荐文章于 2024-11-01 15:19:31 发布

蜜蜂就是我自己

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量331

点赞数

分类专栏： test 前端文章标签： html

本文链接：https://blog.csdn.net/jjf09/article/details/78953282

版权

test 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

有如下代码：

<html>
<head>
    <title>Title</title>
</head>
<body>
    <div>
        <div style="float:left"
            jingjingjingjingjinagjing
        </div>
        <div style="float:left">
            <span>wo ai bei jing tian an men</span>
        </div>
        <div>jiujiang is a beautiful city</div>
    </div>
</body>
</html>

现象：
1. 最外层的div 的width为1294px, height为0, 分析如下：
里面的子div使用float后导致上面的结果，可见当里面的子div使用float后，子div的宽度不是显示为浏览器的宽度，而是由div里面的内容决定，不会占用一行，第二个使用了float的子div不会显示为新的一行，第三个没有使用float的子div把前面两个同级的div看做透明的一样，就好像前面两个div没有一样，但是内容会挨着前面两个同级div显示 ,
2. 没有float的div**没有换行显示，而是紧挨着那个浮动的div**，如果要消除紧挨着，需要在浮动的div后面加一个<div style="clear:both; "></div>, 从而使得那个没有浮动的div显示为新的一行

Clusion :
使用了float属性的子div 撑不起父div的高度