通过CSS样式问题探原理---float问题

业务架构实验室

已于 2022-08-25 01:01:46 修改

阅读量154

点赞数

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

于 2022-08-25 00:49:58 首次发布

本文链接：https://blog.csdn.net/softmanfly/article/details/126515497

版权

前端-CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

float属性是用来让元素脱离文档流这个想必大家都清楚。但是设置完float属性后，对其他元素的影响是什么？

先说结论:

对于其他块元素，无影响，其他块元素会忽略掉这些浮动元素，效果就是浮动元素会盖住非浮动元素。

对于行内元素，比如img标签，p标签等，浮动元素依然会对齐造成影响，这些行内元素会围绕浮动元素。浮动元素会占据他们的位置。

见如下测试代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <!-- float 设置后，div内的子元素就会悬浮在父元素之上，父元素的高度原先在设置前会包含所有子元素的最大高度，里面的元素设置float后，父元素就只会包裹住其他没有设置float的子元素 -->
    <div style="background: green;">
        <div style="width:200px; height: 200px; float: left; "><img src="./logo.png" style="width:200px; height: 200px;"></img></div>
        <div style="width:50px; height: 50px; float:left"><img src="./logo.png" style="width:50px; height: 50px;"></img></div>
        <div style="width:100px; height: 100px; padding: 1px;">
            <!-- <p style="width:50px;height: 20px; margin: 20px; margin-top: 50px; padding: 1px;">测试</p> -->
            <div style="width:100px; height: 100px;">
                <img src="./logo.png" style="width:100px; height: 100px; display: block;"></img>
            </div>
        </div> 
    </div>
    <div style="background: gold;height: 100px;">
        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    </div>

</body>
</html>

渲染效果: