CSS的浮动布局

最新推荐文章于 2024-07-21 19:13:42 发布

漆黑中的空白

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量84

点赞数

分类专栏： css布局文章标签： css html html5 前端

本文链接：https://blog.csdn.net/a2733059233/article/details/120207558

版权

css布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

浮动布局都是老生长谈了，不可否认，这是一个不错的水平布局模式，经常用到。但是呢，这个浮动布局常见的高度塌陷问题是需要解决的。

什么是高度塌陷？

没有设置浮动布局和父元素高度的情况下，父元素的高度由子元素决定（自动撑起）。如果子元素浮动了，就脱离了文本流，父元素高度就变小了（塌陷），这时候下面的元素就自动上移——这就是高度塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .son1,.son2{
      float: left;
      width: 100px;
      height: 100px;
      background-color: aqua;
      margin-left: 20px;
      
    }
    .father{
      background-color: red;  
    }
    .father2{
      background-color: blue;
    }
  
  </style>
</head>
<body>
  <div class="father">jjjj
    <div class="son1">gggg</div>
    <div class="son2">fffdd</div>
  </div>
  <div class="father2">225</div>

</body>
</html>

怎么解决高度塌陷？

1.把父元素高度写死（个人不推荐）

2.在父元素后面添加一个空白的div标签，再设置clear:left（简单页面可以使用，复杂页面有可能影响页面结构）

3.在父元素后面添加伪元素（推荐使用）

::after{
   	 display: block;/*转换为一个块元素*/
     content: "";/*添加一个内容*/
     clear: both;/*清除两侧的浮动*/
      	}

4.给父元素开启BFC （这个方法限制较多，规定了某些布局才能使用，看情况来决定）

overflow: hidden;

漆黑中的空白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的浮动布局

浮动布局都是老生长谈了，不可否认，这是一个不错的水平布局模式，经常用到。但是呢，这个浮动布局常见的高度塌陷问题是需要解决的。什么是高度塌陷？没有设置浮动布局和父元素高度的情况下，父元素的高度由子元素决定（自动撑起）。如果子元素浮动了，就脱离了文本流，父元素高度就变小了（塌陷），这时候下面的元素就自动上移——这就是高度塌陷。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫