盒模型、BFC、清除浮动；

2301_78015468

已于 2023-08-19 14:03:10 修改

阅读量60

点赞数

文章标签： css html css3

于 2023-08-19 14:00:43 首次发布

本文链接：https://blog.csdn.net/2301_78015468/article/details/132379314

版权

盒模型（Box Model）是CSS中用于布局和定位元素的一种概念。它将一个网页上的每个元素看作是一个矩形区域，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 1px solid black;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="box">
    Box Content
  </div>
</body>
</html>

BFC（块格式化上下文，Block Formatting Context）是CSS中的一种渲染机制。它是页面上的一块独立的渲染区域，决定了其中元素的布局规则和相互影响的方式。BFC具有一些特性，例如：浮动元素不会覆盖BFC区域、BFC区域可以包含浮动元素，并且在计算高度时会考虑浮动元素的位置等。

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      overflow: hidden;
    }
    .float {
      float: left;
      width: 200px;
      height: 100px;
      background-color: yellow;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
  </div>
</body>
</html>

清除浮动（Clearing Floats）是一种用于解决浮动元素导致的父容器高度塌陷问题的技术。当一个元素被设置为浮动后，会脱离正常的文档流，可能导致其父容器无法正确计算高度，进而影响页面布局。清除浮动的方法包括：

父元素使用clear属性：给父元素添加clear属性，使其不包含任何浮动元素。例如，使用clear: both;可以清除浮动。
使用clearfix技巧：在父元素上应用clearfix类，这是一种常见的清除浮动的方法。通过给父元素添加伪元素（::after）并设置clear: both;来清除浮动。
使用overflow属性：给父元素设置overflow: hidden;或其他值，可以触发BFC，从而清除浮动。但需要注意，这可能会导致溢出内容被隐藏。

<!DOCTYPE html>
<html>
<head>
  <style>
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }
    .float {
      float: left;
      width: 200px;
      height: 100px;
      background-color: yellow;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
  </div>
</body>
</html>

这些技术可以帮助解决浮动元素带来的布局问题，并确保页面正确显示。具体使用哪种方法取决于具体的情况和需求。

2301_78015468

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型、BFC、清除浮动；

BFC具有一些特性，例如：浮动元素不会覆盖BFC区域、BFC区域可以包含浮动元素，并且在计算高度时会考虑浮动元素的位置等。它将一个网页上的每个元素看作是一个矩形区域，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。清除浮动（Clearing Floats）是一种用于解决浮动元素导致的父容器高度塌陷问题的技术。使用clearfix技巧：在父元素上应用clearfix类，这是一种常见的清除浮动的方法。或其他值，可以触发BFC，从而清除浮动。
复制链接

扫一扫