CSS浮动简介

帅哥不洗头

已于 2024-07-19 16:55:08 修改

阅读量107

点赞数 3

分类专栏：前端CSS 文章标签： css 前端

于 2024-07-19 16:52:24 首次发布

本文链接：https://blog.csdn.net/weixin_74401967/article/details/140554396

版权

前端CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

浮动早期是用来解决文字环绕图片问题,或者文字环绕文字问题的

CSS布局的历史：表格->浮动布局->弹性盒子

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>01_浮动_简介</title>
    <!-- 浮动早期是用来解决文字环绕图片问题,或者文字环绕文字问题的 -->
    <!-- CSS布局的历史：表格->浮动布局->弹性盒子 -->
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: skyblue;
        }

        img {
            width: 200px;
            float: left;
            margin-right: 20px;
        }
        #index::first-letter {
            font-size: 50px;
            color: red;
            float: left;
        }
    </style>
</head>

<body>
    <div>
        <img src="../images/九勾寨.jpg" alt="">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel quod sequi nihil? Praesentium enim,
            voluptates ullam sunt culpa dolore modi autem repudiandae eveniet ex itaque neque omnis beatae cupiditate,
            quae nesciunt. A cumque sint dignissimos omnis incidunt consequatur iusto et libero, facilis eaque culpa,
            non corrupti commodi similique velit ab.
        </span>
    </div>
    <hr>
    <div id="index">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus mollitia ab exercitationem, nihil odit
        adipisci nulla repudiandae placeat earum! Necessitatibus modi incidunt id ullam cum omnis quos cumque explicabo
        magnam.
    </div>
</body>

</html>