【css】BFC

最新推荐文章于 2024-10-02 23:33:51 发布

歌声缓缓

最新推荐文章于 2024-10-02 23:33:51 发布

阅读量61

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_43444977/article/details/130659156

版权

文章介绍了三个CSS布局技巧：如何通过设置position、float、overflow和display属性防止margin重叠；使用overflow:hidden防止文字环绕两栏布局；以及通过overflow和float防止元素塌陷。这些技巧对于优化页面布局和解决CSS常见问题至关重要。

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

如何触发：
1 position为 fixed absolute
2 float不为none
3 overflow不为visible
4 diaplay为 inline-block
作用：
1防止margin重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>margin重叠</title>
</head>
<body>
<div class="box1">
    box1
</div>

<div class="wrap">
    <div class="box2">
        box2
    </div>
</div>

<script>

</script>

<style>
    .wrap {
        overflow: hidden;
    }

    .box1 {
        width: 100px;
        height: 100px;
        border: solid;
        margin: 100px;
    }

    .box2 {
        width: 100px;
        height: 100px;
        border: solid;
        margin: 100px;
    }

</style>

</body>
</html>

在这里插入图片描述

2、两栏布局，防止文字环绕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>防止文字环绕</title>
</head>
<body>
<div class="box">

</div>
<div class="poem">
    春江潮水连海平，海上明月共潮生。

    滟滟随波千万里，何处春江无月明！

    江流宛转绕芳甸，月照花林皆似霰；

    空里流霜不觉飞，汀上白沙看不见。

    江天一色无纤尘，皎皎空中孤月轮。

    江畔何人初见月？江月何年初照人？

    人生代代无穷已，江月年年望相似。

    不知江月待何人，但见长江送流水。

    白云一片去悠悠，青枫浦上不胜愁。

    谁家今夜扁舟子？何处相思明月楼？

    可怜楼上月裴回，应照离人妆镜台。

    玉户帘中卷不去，捣衣砧上拂还来。

    此时相望不相闻，愿逐月华流照君。

    鸿雁长飞光不度，鱼龙潜跃水成文。

    昨夜闲潭梦落花，可怜春半不还家。

    江水流春去欲尽，江潭落月复西斜。

    斜月沉沉藏海雾，碣石潇湘无限路。

    不知乘月几人归，落月摇情满江树。
</div>




<script>

</script>
<style>
    .poem{
        overflow: hidden;

    }
.box{
    width: 100px;
    height: 100px;
    border: solid;
    float: left;

}

</style>

</body>
</html>

在这里插入图片描述

3 防止元素塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>防止元素塌陷</title>
</head>
<body>
<div>
    <div class="wrap">
        <div class="box"></div>
    </div>
</div>


<script>

</script>
<style>
.wrap{
    border: solid;
    overflow: hidden;
}

.box{
    border: solid;
    width: 100px;
    height: 100px;
    float: left;
}
</style>

</body>
</html>