解决塌陷的几种·办法

最新推荐文章于 2022-04-26 09:50:24 发布

原创最新推荐文章于 2022-04-26 09:50:24 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了CSS中解决浮动元素引起的父级高度塌陷问题的多种方法，包括使用边框、定位、内边距及浮动本身等策略，旨在帮助前端开发者掌握布局控制的核心技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>解决塌陷的几种办法</title>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }
   .box {
    background: red;
    /*border: 1px solid black;   边框线可以解决*/
    /*position: absolute;    定位可以解决*/
    /*padding-top: 1px;    内边距可以解决      会脱离文档流*/
    /*float: left; 浮动可以解决    会脱离文档流*/
   }
   .child {
    width: 200px;
    height: 200px;
    background: green;
    margin-top: 80px;
   }
  </style>
</head>
<body>
  <div class="boxwrap">
   <div class="box">
    <div class="child">