浮动---float 属性

最新推荐文章于 2024-03-21 19:18:07 发布

沐沐185

最新推荐文章于 2024-03-21 19:18:07 发布

阅读量257

点赞数

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_67642008/article/details/125153342

版权

浮动元素父元素塌陷清除浮动 overflow 伪类:after

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

父盒子的高度最好让子盒子来撑开来，这样父盒子会随着子盒子来自动变化

浮动---float 属性

浮动可以控制块元素的位置：

float:left 元素可以靠左侧浮动
float:right 元素可以靠右侧浮动

属性值	说明
float:left	元素向左浮动
float:right	元素向右浮动
float:none	默认值，元素不浮动

当设置了子元素的高度和宽度之后，父元素会出现塌陷现象

为什么会出现塌陷？解决方案，是什么？

6.1清除浮动：

clear 属性

属性值	说明
clear:l eft	在左侧不允许出现浮动元素
clear: right	在右侧不允许出现浮动元素
clear: both	在左、右两侧不允许出现浮动元素
clear: none	默认值。允许浮动元素出现在两侧

解决塌陷方法一：

浮动元素后面 加空 div，这个空的盒子不能添加浮动，并设置clear : both （清除两边浮动）的样式

<style>
        .father {
            background-color: gray;
        }
        .box {
            width: 200px;
            height: 200px;
            background: pink;
            /* 默认向左浮动 */
            /* float: left; */
            /* 向右浮动 */
            /* float: right; */
            /* clear: right; 需要设置float: right;*/
            /* clear: both;无论设置float: left;还是float: right;
            都可以清除 */
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box">1</div>
        <div class="box" style="clear: both;">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div style="clear: both;"></div>
    </div>
</body>

解决方案二

设置父元素的高度。

注意：但是这种方法不智能，一般父元素的大小是由子元素来撑开，设置父元素的高度以后，父元素的大小就确定了，后面再添加子元素还是有可能溢出。

<style>
        .father {
            background-color: gray;
            height: 500px;
        }
        .box {
            width: 200px;
            height: 200px;
            background: pink;
            /* 默认向左浮动 */
            /* float: left; */
            /* 向右浮动 */
            /* float: right; */
            /* clear: right; 需要设置float: right;*/
            /* clear: both;无论设置float: left;还是float: right;
            都可以清除 */
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <!-- <div style="clear: both;"></div> -->
    </div>
</body>

6.2溢出

属性值说明

overflow :visible 默认值。内容不会被修剪，会呈现在盒子之外

overflow :hidden 内容会被修剪，并且其余内容是不可见的

overflow :scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

overflow :auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

解决方案三：

父级添加overflow属性，除了overflow 默认的visible 值都可以

<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            /* overflow: hidden; */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        父类添加overflow父类添加overflow父类添加overflow父类添加overflow父类添加overflow
        父类添加overflow父类添加overflow父类添加overflow父类添加overflow父类添加overflow
    </div>
</body>

注意：但是这个方法的弊端是，当页面需要出现下拉栏时，将一并被隐藏。

6.3 伪类 after

语法结构为：

.clear:after{
      content: '';          /*在clear类后面添加内容为空*/
       display: block;      /*把添加的内容转化为块元素*/
       clear: both;         /*清除这个元素两边的浮动*/
                        }

注意：在父元素中添加伪类 after ，来清除浮动，在子元素中添加浮动方式，如float : left ;

总结：

清除浮动，防止父级边框塌陷的四种方法

方法	弊端
浮动元素后面加空div	空div会造成HTML代码冗余
设置父元素的高度	元素固定高会降低扩展性
父级添加overflow属性	下拉列表框的场景不能用
父级添加伪类after	写法比上面稍微复杂一点，但是没有副作用，推荐使用

沐沐185

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动---float 属性

清除浮动，防止父级边框塌陷的四种方法浮动元素后面加空div 空div会造成HTML代码冗余设置父元素的高度元素固定高会降低扩展性父级添加overflow属性下拉列表框的场景不能用父级添加伪类after 写法比上面稍微复杂一点，但是没有副作用，推荐使用...
复制链接

扫一扫

专栏目录