19.float

最新推荐文章于 2022-02-24 15:02:50 发布

yu&2022

最新推荐文章于 2022-02-24 15:02:50 发布

阅读量117

点赞数

分类专栏： CSS3 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45623678/article/details/114012198

版权

CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

19.float

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
    <div class="layer01">
        <img src="images/a.png" alt="">
    </div>
    <div class="layer02">
        <img src="images/b.png" alt="">
    </div>
    <div class="layer03">
        <img src="images/c.png" alt="">
    </div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动。
    </div>
</div>
</body>
</html>

css:

#father{
    border: 1px solid #000;
}
#father:after{
    content: "";
    display: block;
    clear: both;
}
.layer01{
    border:1px dashed #dde96b;
    display: inline-block;
    float: left;
}
.layer02{
    border:1px dashed #736be9;
    display: inline-block;
    float: left;
}
.layer03{
    border:1px dashed #ef1d7f;
    display: inline-block;
    float: right;
}
.layer04{
    border:1px dashed #e98f6b;
    display: inline-block;
    float: right;
}


/*clear
    clear:right; 右侧不允许右浮动元素
    clear:left;  左侧不允许右浮动元素
    clear:both;  两侧不允许右浮动元素
    clear:none;  允许
*/

/*父级边框塌陷问题解决方案
    1.增加父级元素的高度（不推荐）
        #father{
        border: 1px solid #000;
        height: 800px;
            }
    2.增加一个空的div标签，清除浮动。
        <div class="clear"></div>
        .clear{
                margin: 0;
                padding: 0;
                clear:both;
               }
    3.在父级元素中增加一个overflow:hidden
    4.父类添加一个伪类：after(常用)
        #father:after{
                        content: "";
                        display: block;
                        clear: both;
                    }
*/
/*小结：
    1、浮动元素后面增加空div
        简单，代码中尽量避免空div
    2、设置父元素的高度
        简单，元素有固定高度，就会被限制
    3、overflow
        简单，下拉的一些场景避免使用
    4、父类添加一个伪类：after(推荐)
        写法稍微复杂
*/
/*对比
    display:
        方向不可控制，但不会脱离标准文档流
    float:
        方向可以控制，但浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
*/

运行结果：
在这里插入图片描述

yu&2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
19.float

19.floathtml:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>float</title> <link rel="stylesheet" href="css/style.css"></head><body><div id="father"> &lt
复制链接

扫一扫