浮动+网页布局+高度塌陷问题解决

最新推荐文章于 2024-07-19 14:29:49 发布

weixin_41075407

最新推荐文章于 2024-07-19 14:29:49 发布

阅读量67

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_41075407/article/details/117635396

版权

浮动+网页布局+高度塌陷问题解决

浮动
float: none元素不浮动 /left元素向左浮动 /right元素向右浮动
特点：
- 设置浮动的元素会脱离文档流，不再占据文档流的位置，元素也变成了行内块元素，即不占据一行，高度和宽度默认被内容撑开，宽度和高度可设置。
- 浮动元素会向父元素的左/右移动，并不会从父元素没流出，也不会超过前面的浮动或没有设置浮动的块元素
- 浮动元素不会盖住文字，文字为环绕排布
作用：可以元素水平排列
网页布局

<body>

    <!-- 创建头部 -->
    <header></header>

    <!-- 创建网页的主体 -->
    <main>
        <!-- 左侧导航 -->
       <nav></nav>

       <!-- 中间的内容 -->
       <article></article>

       <!-- 右边的边栏 -->
       <aside></aside>

    </main>
    
    <!-- 网页的底部 -->
    <footer></footer>
</body>

高度塌陷问题
什么是高度塌陷：父元素不设置高度，子元素设置浮动，子元素脱离文档流，无法撑起父元素，导致父元素高度丢失，使得父元素下方的元素自动上移，影响布局
如何解决：
方法1：开启父元素的隐藏属性：BFC（块级格式化环境）
- block formatting context :使当前元素布局独立
- 特点：当前元素不会被浮动元素所覆盖；当前元素的子元素和该元素的外边距不会重叠；当前元素可以包含浮动的子元素
- 如何开启：设置浮动（不推荐）、设置为行内块元素（不推荐）、overflow设置为非visible
方法2：可通过clear清除浮动元素对当前元素的影响：
- 原理：是将当前元素受影响的margin还原
- clear:left清除左侧浮动元素对当前元素的影响
- clear:right清除右侧浮动元素对当前元素的影响
- clear:both清除两侧最大影响的那一侧
方法3：在父元素上使用clearfix类(同时解决高度塌陷和外边距重叠的问题)，并在style里标明：

.clearfix::before,.clearfix::after{
		content:' ';
		display:table
		clear:both

weixin_41075407

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动+网页布局+高度塌陷问题解决

浮动+网页布局+高度塌陷问题解决浮动float: none元素不浮动 /left元素向左浮动 /right元素向右浮动特点：设置浮动的元素会脱离文档流，不再占据文档流的位置，元素也变成了行内块元素，即不占据一行，高度和宽度默认被内容撑开，宽度和高度可设置。浮动元素会向父元素的左/右移动，并不会从父元素没流出，也不会超过前面的浮动或没有设置浮动的块元素浮动元素不会盖住文字，文字为环绕排布作用：可以元素水平排列网页布局<body> <
复制链接

扫一扫