<!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>
</head>
<body>
<!-- 高度塌陷
高度塌陷是浮动布局中很常见的问题
在浮动布局中,父元素的高度默认是被子元素撑开的
当子元素浮动后会完全脱离文档流,会从文档流中脱离
从而无法成其父元素的高度,导致父元素高度丢失
父元素高度丢失之后,其下的元素会自动上移,导致页面布局混乱 -->
<!-- BFC (Block formatting context) 块级格式化环境
BFC是一个css中影藏的属性,为一个元素开启BFC之后该元素会变成一个独立的布局区域
元素开启BFC后的特点:
不会被浮动元素所覆盖
子元素和父元素外边距不会重叠
可以包含浮动的子元素
开启BFC的常见方式:
设置元素的浮动
将元素设置为行内块元素
将元素的overflow设置为非visible的值
最常用的是为元素的overflow设置为hidden或anto 开启BFC,以使其可以包含浮动元素
-->
<!-- clear
用来清除浮动元素对当前元素的影响
可选值:
left:清除左侧浮动元素对当前元素的影响
right:清楚右侧浮动元素对当前元素的影响
原理:是浏览器自动为元素设置一个上外边距,使其位置不受其他元素的影响-->
</body>
</html>
HTML,css基础13
最新推荐文章于 2024-09-30 08:51:48 发布
本文介绍了浮动布局中常见的高度塌陷问题,以及如何通过BFC(Block Formatting Context)来解决这个问题。BFC是一个独立的布局区域,可以包含浮动元素并防止高度塌陷。同时,文章也提到了`clear`属性用于清除浮动元素对当前元素的影响。理解BFC和`clear`对于维护良好的页面布局至关重要。
摘要由CSDN通过智能技术生成