CSS中BFC

最新推荐文章于 2024-03-26 16:09:58 发布

阿基米德猜想

最新推荐文章于 2024-03-26 16:09:58 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/m0_49830850/article/details/119834751

版权

高度塌陷：

当一个元素被设置为浮动，那么它的高度将会不被文档流识别，从而让在文档流中的div给覆盖。

BFC：

DIV有Float浮动的属性，又不至于因为高度塌陷而被覆盖。

设置BFC:

子元素设置margin影响到父元素：

附代码：

<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2021/8/21
  Time: 8:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: yellow;
            /*float: left;*/


        }
        .box2{
            width:200px;
            height:200px;
            background-color: gold;
            overflow: hidden;

        }
        .box3{
            width: 100px;
            height:100px;
            background-color: green;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box3">

    </div>
</div>
<%--<div class="box2"></div>--%>

</body>
</html>

阿基米德猜想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中BFC

高度塌陷：当一个元素被设置为浮动，那么它的高度将会不被文档流识别，从而让在文档流中的div给覆盖。BFC：DIV有Float浮动的属性，又不至于因为高度塌陷而被覆盖。设置BFC:子元素设置margin影响到父元素：附代码：<%-- Created by IntelliJ IDEA. User: user Date: 2021/8/21 Time: 8:08 To change this template use File ...
复制链接

扫一扫