CSS中关于使用float :right会自动换行的问题

最新推荐文章于 2022-04-18 17:24:55 发布

原创最新推荐文章于 2022-04-18 17:24:55 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了在CSS布局中遇到的一个问题：使用`float: right`时文本会自动换行。作者通过自己的实践，发现了解决这一问题的两个简单有效的方法：将浮动元素放在非浮动元素之前，或者给非浮动元素添加浮动属性。

这是我在做作业过程中发现的问题，当我使用float :right来控制文本位置的时候，发现不论怎么调都会让我的文本自动换行。

这是我应该做出来的效果：
在这里插入图片描述
但当我把自己觉得正确的代码写出来后，发现成了这样：

最后终于发现这个问题是由于使用float :right会自动换行引起的，所以我上网查了下解决办法，看到方法很简单，很实用：
1、只需要把float的模块放到非float的前面即可。
2、给非float元素添加float属性。

最后码上最后成果的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            font-size: 14px;
            color: #ffffff;
        }

        .box1 {
            width: 990px;
            height: 185px;
            background-color: #f3f0e5;
            border: 1px darkgrey solid;
            margin: 20px auto;
        }

        .box2 {
            border: none;
            height: 55px;
            color: #79122b;
        }

        li {
            width: 150px;
            height: 105px;
            float: left;
            padding: 20px 0 90px;
        }

        li h2 {
            padding-left: 90px;
            font-size: 30px;
            padding-top: 5px;
        }

        li a, li p {
            padding-left: 90px;
        }

        #one {
            width: 240px;
            height: 20px;
            background: #5494a4 url("../images/icon1.png") no-repeat 15px 15px;
            margin-left: 10px;
        }

        #two {
            width: 240px;
            height: 20px;
            background: #5ca9a5 url("../images/icon2.png") no-repeat 15px 15px;
        }

        #three {
            width: 240px;
            height: 20px;
            background: #5ea86c url("../images/icon3.png") no-repeat 15px 15px;
        }

        #four {
            width: 240px;
            height: 20px;
            background: #86556d url("../images/icon4.png") no-repeat 15px 15px;
        }


        .box2 h2 {
            background: url("../images/iconh.png") no-repeat 8px 12px;
            padding-left: 35px;
            padding-top: 15px;
            font-size: 18px;
        }

        .box2 a {
            display: inline-block;
            font-weight: bold;
            float: right;
            padding-top: 20px;
            padding-right: 10px;
        }

        .box2 img {
            float: right;
            padding-top: 5px;
        }

        .box2 a:link {
            color: #a84848;
            text-decoration: none;
        }

        li a:link {
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <a href="#">连播本页</a>
        <h2><img src="../images/play1.png" alt="">MUSIC-精选歌单</h2>
    </div>
    <ul>
        <li id="one">
            <h2>Radio</h2>
            <p>音乐达人</p>
            <a href="#">随便听听>></a>
        </li>
        <li id="two">
            <h2>Song</h2>
            <p>音乐达人</p>
            <a href="#">最新单曲>></a>
        </li>
        <li id="three">
            <h2>Album</h2>
            <p>音乐达人</p>
            <a href="#">音乐专辑>></a>
        </li>
        <li id="four">
            <h2>MV</h2>
            <p>音乐达人</p>
            <a href="#">劲爆MV>></a>
        </li>
    </ul>
</div>
</body>
</html>