Web前端篇：css浮动

最新推荐文章于 2024-08-22 17:01:19 发布

前端大叔熟

最新推荐文章于 2024-08-22 17:01:19 发布

阅读量739

点赞数

分类专栏： HTML 科技 web前端程序员 css JavaScript 编程资讯文章标签：程序员编程 web前端资讯浮动

本文链接：https://blog.csdn.net/ITmiaomiao666/article/details/91898006

版权

浮动是CSS布局的关键，用于实现文字环绕等效果。然而，浮动可能导致父元素高度塌陷，进而引起页面布局问题。文章介绍了浮动的原理、影响及四种清除浮动的方法：固定高度、内墙法、伪元素清除法（推荐）和overflow:hidden。同时，文章探讨了BFC（块级格式化上下文）在清除浮动中的作用，帮助理解和优化页面布局。

摘要由CSDN通过智能技术生成

浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果。
文字环绕现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外边距</title>
    <style type="text/css">
        html{
            font-size:24px;
        }
        img{
            width:20rem;
        }
        #sep{
            float: left;
        }
        p{
            border:1px solid red;
            text-indent:2rem;
            font-size:1rem;
        }
    </style>
</head>
<body>
    <div id="sep">
        <img src="https://i1.mifile.cn/a4/xmad_15590487108559_JOpcA.jpg" alt="加载失败" title="王源">
    </div>
    <p>
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
    </p>
</body>
</html>