gpt4 book ai didi

html - 修复 HTML5 float 问题

转载 作者:行者123 更新时间:2023-11-28 16:50:09 25 4
gpt4 key购买 nike

当我一起使用 aside、section 和 footer 时,我在该部分上使用“float:left”,页脚就像它的“position:absolute”一样,绕过 aside 和 section,甚至转到页面顶部尽管我没有在 CSS 中指定任何位置。此外,该部分占据了整个页面,重叠在一旁。不管我是使用 HTML5,还是将所有内容还原为 div 和 id,结果都是一样的。

我做错了什么?为什么要这样做?我该如何解决?

我的 CSS:

aside {
padding: 2%;
min-height: 863px;
width: 10%;
float: left;
}

section {
padding: 2%;
width: 80%;
float:left;
}

footer {
height: 80px;
padding: 2%;
background: lightblue;
}

我的 HTML:

    <aside>
<p>This is the aside</p>
</aside>
<section>
This is the section
</section>
<footer>
This is the footer
</footer>

最佳答案

float: ... 用于在图像周围环绕文本并过度用于布局目的。您可以在页脚上打一个 clear: both; 并称之为一天(除了百分比宽度之外,您的填充还增加了宽度 - 添加 * {box-sizing: border-box ;}).

对于现代,display: flex; 是要走的路...

HTML

<body>
<main-section>
<aside>
<p>This is the aside</p>
</aside>
<section>
This is the section
</section>
</main-section>
<footer>
This is the footer
</footer>
</body>

CSS

body {
display: flex;
flex-flow: column;
}

aside {
min-height: 863px;
flex: 1;
}

main-section {
display: flex;
}

section {
flex: 8;
}

footer {
background: lightblue;
height: 80px;
}

关于html - 修复 HTML5 float 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59340846/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com