css-11. 浮动

最新推荐文章于 2024-07-19 15:50:46 发布

小虾仁she

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量55

点赞数

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

本文链接：https://blog.csdn.net/weixin_43552734/article/details/114380576

版权

前端css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

浮动规则

块级元素的盒子会发生遮盖现象
元素的内容不会发生遮盖（可以用以实现文字环绕）

浮动特征

浮动的元素从左到右（从右到左）紧密排列
浮动的元素具有块级元素的特征（可以设置宽高、margin、padding），但没有换行符
浮动的元素不存在margin塌陷问题
浮动的元素脱离了标准流，不再占有原来的位置–>子元素设置浮动之后，父元素如果没有设置高度，会呈现塌陷的效果
浮动的元素自适应宽度为包裹内容的宽度

以上特性不止针对块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 550px;
            height: 400px;
            background: pink;
        }
        h1 {
            float: left;
            background: teal;
        }
        <!--浮动后的行内元素span可以设置margin-top、width等-->
        span {
            float: left;
            width: 150px;
            margin-top: 100px;
            background: snow;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Hello World</h1>
        <h1>Hello World</h1>
        <h1>Hello World</h1>
        <span>Hello World</span>
        <span>Hello World</span>
        <span>Hello World</span>
    </div>
</body>
</html>

清除浮动

给父元素设置高度

缺点：无法根据内容的多少控制容器的大小
外墙法：在父元素后面，添加父元素的一个同级空元素并设置为清除浮动（clear:both）

缺点：无法显示背景颜色

经测试：设置空span无效
内墙法：
在父元素内部后，添加一个空元素并设置为清除浮动

注意：空元素的宽度要足够
将父元素设置为浮动
设置父元素为行内块元素
display:inline-block

缺点：如果父级元素为div，将不会独占一行
设置overflow

设置为scroll：不管溢出不溢出，显示滚动条

设置为auto：溢出时显示滚动条

设置为hidden：隐藏溢出

设置为visible，不能清除浮动
使用伪元素：将伪元素添加到父级容器的后面，代替内墙法插入的元素，并设置伪元素为块级元素和清除浮动
```
.box:after{
    content:"";
    display:block;
    clear:both;
}
```

margin对浮动元素的影响

首先分析所贴的元素
在分析相对所贴的元素的移动距离

小虾仁she

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css-11. 浮动

浮动规则块级元素的盒子会发生遮盖现象元素的内容不会发生遮盖（可以用以实现文字环绕）浮动特征浮动的元素从左到右（从右到左）紧密排列浮动的元素具有块级元素的特征（可以设置宽高、margin、padding），但没有换行符浮动的元素不存在margin塌陷问题浮动的元素脱离了标准流，不再占有原来的位置–>子元素设置浮动之后，父元素如果没有设置高度，会呈现塌陷的效果浮动的元素自适应宽度为包裹内容的宽度以上特性不止针对块级元素<!DOCTYPE html><html
复制链接

扫一扫