html里的float元素的简单实例

最新推荐文章于 2022-03-23 19:38:57 发布

kodopy

最新推荐文章于 2022-03-23 19:38:57 发布

阅读量389

点赞数

文章标签： css

本文链接：https://blog.csdn.net/kodopy/article/details/107095036

版权

1.图文环绕的样式可以用浮动实现：

	<style>
        .test img{
            float: left;
        }
    </style>
----------------------------------------
<body>
    <div class="test">
        <img src="图片地址" alt="">
        <p>Lorem400</p>
    </div>
</body>

设置图片浮动，文字会围绕图片周围，效果如下图所示：
在这里插入图片描述
2.浮动带来的高度塌陷的问题:

<style>
        .box1 {
            border: 1px solid green;
            background-color: cadetblue;
        }
        
        .box2 {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background-color: aqua;
            float: left;
        }
</style>
...
<body>
    <div class="box1">
        <div class="box2">
            1
        </div>
        <div class="box2">
            2
        </div>
        <div class="box2">
            3
        </div>
    </div>
</body>

因为box1没有给到高度值，当三个box2都浮动起来的时候，box1里就没有元素撑开，就会显示以下效果：在这里插入图片描述
解决高度塌陷的方法可以是给box1设置高度，这样就不会有高度塌陷的问题；
也可以尝试用一个空盒子清除浮动：

<div style="clear: both;"></div>

3.大部分网页中的导航栏也是用ul li浮动来做的:

<style>
	.nav ul li {
            float: left;
            list-style: none;
            padding: 0 32px;
        }
</style>
...
<div class="nav">
        <ul>
            <li>
                <a href="#">首页</a></li>
            <li>
                <a href="#">全部商品</a></li>
            <li>
                <a href="#">手机数码</a></li>
            <li>
                <a href="#">平板电脑</a></li>
        </ul>
    </div>

调过样式后就能呈现效果不错的导航条。