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

原创

于 2020-04-03 17:42:10 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我在做作业过程中发现的问题，当我使用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;

最低0.47元/天解锁文章

200万优质内容无限畅学