float，浮动高度设置

Seahorse7

已于 2022-02-21 13:08:15 修改

阅读量418

点赞数

CC 4.0 BY-SA版权

文章标签： html css html5

于 2022-02-21 13:07:03 首次发布

本文链接：https://blog.youkuaiyun.com/Seahorse7/article/details/123044957

本文探讨了在main容器中元素全浮动后，如何保持footer稳定，需先创建三栏布局，然后调整内部子元素，解决高度计算问题。关键在于理解浮动对盒子模型的影响和如何正确设置高度或清除浮动。

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

main 盒子中所有元素浮动后，盒子高度由main高度属性决定，若未设置则高度默认为0

导致footer栏移动到红框位置。

最好先设置为三栏，再在栏内划分两列。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Seahorse7

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS-float浮动和高度塌陷问题详解

主营前端方向，技术栈是vue

11-21

1101

float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)

CSS教程：div设置float后高度不自动增加

01-19

因为从这个题目我们可以更加容易的看出，如果您没有闭合(清除)浮动元素，它将造成的后果是—–div的高度不能自动增加。言归正传目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：1.额外标签法这种方法就是向...

参与评论您还未登录，请先登录后发表或查看评论

float元素浮动后高度不一致导致错位的解决办方法

12-13

当N个元素浮动后，会导致错位的问题。一般给元素一个固定的height就没有这个现象。但是当高度不一致时，就需要想别的办法来解决了： 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size，再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-block; vertical-align:top; font-size:

float div高度自适应

weixin_34037977的博客

06-14

172

float div高度自适应（解决div float后，父div高度无法自适应的问题）在用CSS+DIV的布局中，经常会发现，当一个DIV float之后，如果他的高度超过了其父DIV的高度时，其父DIV的高度并不会相应的进行调整。要解决这个问题（也叫做闭合(清除)浮动），我们有四种办法：额外标签法这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以...

CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）

weixin_30419799的博客

05-06

253

css之浮动布局本人博客：查看文章 1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成：使用css属性float：left/right/none...

浮动元素高度问题

qq_37805832的博客

09-16

829

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>64-浮动元素高度问题</title> <style> *{ margin: 0; padding: 0; } div{ border: 1px

div内容设float之后，div的自动高度适应

weixin_34087301的博客

07-13

311

div的【多列】内容舍友float之后，外层div的高度会不受内容控制，可以div所有内容最后加上一个clear，几种方法： <div id="main"> <div id="content"></div> </div> 　　当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完...

div三栏布局左中右通过float浮动来设置

09-25

当元素浮动后，它会脱离当前的正常文档流，不影响其他非浮动元素的位置，除非这些元素也设置了浮动。在给定的代码示例中，我们有三个`div`元素，分别对应左侧栏（`side`）、右侧栏（`side1`）和主要内容区域（`...

Float浮动与清除浮动

01-08

浮动（Float）是CSS布局中一个重要的概念，用于创建网页元素的水平排列，尤其是在传统的流式布局中。浮动元素会脱离文档的正常流，向指定的方向（左或右）移动，直到其边缘碰到包含框或其他浮动元素的边缘。这使得...

设置float:left以后父容器的高度为0

晨露

01-13

2205

设置float:left以后父容器的高度为0的解决方案： 1：去掉float:left样式，改为 display:inline-block; 或者 2: 给父容器添加样式， overflow:hidden

浮动造成的高度塌陷问题

sherlock9866的博客

06-04

292

浮动可以解决一些很古怪的间隔问题，但是浮动也可能造成父盒子的高度塌陷问题。首先明确，什么是高度塌陷。我们先来看一个显示正常的情况： <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .parent{ ...

Float布局，高度塌陷，Clear详解

DanmoSAMA的博客~

02-13

318

何为 float 流式布局？遇到元素塌陷如何解决？将float属性设置为left或right，来实现在水平方向上的布局。如果元素塌陷，两种方式解决：开启父元素的BFC（设置overflow:hidden），由于BFC布局规则：计算BFC的高度时，浮动元素也参与计算，所以父元素的高度不会塌陷。使用伪类after，开启display:block，并且开启clear:both（我的理解是：display只要是块级元素，拥有上外边距的都可以，所以display:table也行，但是不能是inline-.

浮动元素的高度怎么撑起

weixin_30325971的博客

02-25

407

当我们给子元素设置float不为none的属性值时，会导致父元素高度塌陷的两种情况其父元素刚好没有设置高度；那么此时的父元素是没有高度的。其父元素设置的高度不够，导致子元素溢出；当我们给li 元素高度，并都向左浮动时，ul 的高度为0 如下：解决办法：开启BFC：　　　　　设置该元素overflow属性为除去visible的属性值 ...

div定义float:left;后height不会自适用高度，怎么解决

99guo的专栏

04-14

7641

第一种就是: 后面加个DIV清楚浮动；建议不使用这方法；无标题文档无标题文档无标题文档有文档有标签文档有标签文档有标签文档有标签文档有标签文档第二种就是你给.a加个属性｛ overflow:auto;｝就可以了，这样比第一种节约了代码； zoom: 1; overflow:auto; 两个一起才是清楚浮动！

overflow：hidden使用（溢出隐藏、清除浮动、解决外边距塌陷等等）

qq_40087726的博客

02-25

985

一. overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 /*css样式*/ <style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overflow: hidden; /*溢出隐藏*/ } </style> /*html*/ &lt

[前端笔记004]CSS布局之浮动与高度塌陷 -- float

记一些学习笔记

11-11

377

CSS布局中的浮动与高度塌陷，float

div 内容设置float后,仍然高度自适应

huwei0518的专栏

03-14

1051

正常情况下，高度默认是auto，应该都是可以自适应的。但是当其内容设置了float后，如：高度便无法自适应了，因为飘到另外的世界去啦我的办法是，外层的div也浮动，改为：

解决float后，高度坍塌问题

belieber1021的博客

02-18

275

一、使用Overflow: auto;使高度自适应，缺点：会出现滚动条行程下拉查看

解决子元素用css float浮动后父级元素高度自适应高度

咋个办呢 zgbn

03-08

6264

解决子y元素用css float浮动后父级元素高度自适应高度正常HTML当在对象内的盒子使用了float后，导致对象本身不能被撑开自适应高度，这个是由于浮动产生原因。

CSS position详解与float浮动深度解析

"CSS的position定位和float浮动详解" 在网页设计和开发中，CSS（Cascading Style Sheets）是用于控制网页元素样式的关键工具。本文将深入探讨CSS中的两个核心概念：position定位和float浮动，它们对于创建复杂的...