浮动布局解决文字环绕图片问题

最新推荐文章于 2025-01-15 02:59:05 发布

ohmorning

最新推荐文章于 2025-01-15 02:59:05 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.csdn.net/qq_41818857/article/details/103773912

网页布局之浮动

用浮动解决文字环绕图片问题一

使用浮动却给网页布局带来了便捷，但同时也会带来副作用，这些问题会在后面细说，今天就先来了解一下浮动吧！
一开始float是用来解决文字环绕图片问题的，话不多说，下面附上效果图和代码。
没使用float属性前：
在这里插入图片描述
使用float后：

<style>
        .wrap {
            width: 700px;
            border: 1px solid black;
        }

        img {
            width: 300px;
            /* float: left; */
        }
    </style>

<div class="wrap">
        <img src="image/01.jpg" alt="">
        使用浮动却给网页布局带来了便捷，但同时也会带来副作用，这些问题会在后面细说，今天就先来了解一下浮动吧！
        一开始float是用来解决文字环绕图片问题的，话不多说，直接上代码。使用浮动却给网页布局带来了便捷，但同时
        也会带来副作用，这些问题会在后面细说，今天就先来了解一下浮动吧！一开始float是用来解决文字环绕图片问题的
        ，话不多说，直接上代码。使用浮动却给网页布局带来了便捷，但同时也会带来副作用，这些问题会在后面细说，今天
        就先来了解一下浮动吧！一开始float是用来解决文字环绕图片问题的，话不多说，直接上代码。
        使用浮动却给网页布局带来了便捷，但同时也会带来副作用，这些问题会在后面细说，今天就先来了解一下浮动吧！
        一开始float是用来解决文字环绕图片问题的，话不多说，直接上代码。一开始float是用来解决文字环绕图片问题的，
        话不多说，直接上代码。使用浮动却给网页布局带来了便捷，但同时也会带来副作用，这些问题会在后面细说，今天
        就先来了解一下浮动吧！一开始float是用来解决文字环绕图片问题的，话不多说，直接上代码。
        使用浮动却给网页布局带来了便捷，但同时也会带来副作用，这些问题会在后面细说，今天就先来了解一下浮动吧！
        一开始float是用来解决文字环绕图片问题的，话不多说，直接上代码。
    </div>