CSS Float 内容创建空白并重叠其他 div
Posted
技术标签:
【中文标题】CSS Float 内容创建空白并重叠其他 div【英文标题】：CSS Float content creating whitespace and overlapping other div 【发布时间】：2017-08-23 01:17:09 【问题描述】：我目前正在创建一个响应式产品组合，但遇到了一些麻烦。
在某个断点（css 媒体查询）之前，我网站“关于”部分的第二和第三段是浮动的。随着窗口变小，文本开始与页脚重叠，并最终在底部和侧面创建一个空白。当它到达断点时，浮点数被赋值为'none'。
我怎样才能让容器的高度取决于里面有多少内容（即正常行为）？我已经尝试过 clearfix，但这似乎不起作用。
https://codepen.io/webdevkid/pen/gmBVMj
<body>
<nav>
<div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a><div id="menu-icon"></div></div><div class="clear"></div>
<ul id="main-links">
<a href="#"><li><span class="word-position">About</span></li></a>
<a href="#"><li><span class="word-position">Work</span></li></a>
<a href="#"><li class="last-child"><span class="word-position">Contact</span></li></a>
</ul>
</nav>
<div id="main-container">
<div id="introductory-background">
<div id="introductory-overlay">
<div id="introductory-content">
<div id="introductory-container">
<h1 id="role-header">Junior Web Developer</h1>
<h3 id="role-support-text">...but that's not all I can do</h3>
<a id="read-more" class="no-select">Read More</a>
</div>
</div>
</div>
</div>
<div id="about-section">
<br />
<br />
<div id="photo-frame">
<div id="picture"></div>
</div>
<br />
<div id="about-text-container">
<p>Hi There! My name is Ed Garbutt, a Junior Web Developer based in South Buckinghamshire, with a huge passion for all things programming.</p>
<br />
<p id="about-left-side" class="side-by-side">Sadly, I'm not like most Developer out thers. I don't drink Red Bull or Monster Cans. I'm not a fan of Start Wars. I don't read Marvel Comic Books, but I am someone who likes going outside here and then.</p>
<p id="about-right-side" class="side-by-side">All jokes aside, what you <b>will</b> get is someone who prides himself on attention to details, who will always rise to a challenge ans is constantly looking to better himself, building upon his existing knowledge of programming languages and frameworks.</p>
</div>
</div>
</div>
<footer>
<p id="footer-text">
© 2016 Ed Garbutt. All rights reserved.
</p>
</footer>
</body>
CSS
body
margin: 0;
nav
width: 100%;
height: 50px;
position: fixed;
background-color: rgb(40, 40, 40);
border-bottom-style: solid;
border-bottom-color: rgb(238, 0, 0);
border-bottom-width: 7.5px;
padding-top: 14px;
z-index: 10;
#logo
position: relative;
bottom: 5px;
font-size: 30px;
padding-left: 8px;
float: left;
font-family: bebas;
#word-1
color: rgb(0, 154, 205);
#word-2
color: rgb(255, 250, 250);
ul#main-links
list-style: none;
margin: 0;
padding-right: 50px;
float: right;
height: 100%;
border-bottom: 7.5px solid transparent;
display: block;
font-size: 0;
ul#main-links li
display: inline-block;
text-align: center;
border-bottom-style: solid;
border-bottom-width: 7.5px;
border-bottom-color: rgb(238, 0, 0);
color: white;
font-family: arcon;
font-size: 18px;
height: 100%;
width: 90px;
position: relative;
z-index: 2;
a:link
text-decoration: none;
a:visited
text-decoration: none;
color: white;
a:active
text-decoration: none;
color: white;
a#logo-link
text-decoration: none;
a#logo-link:visited
text-decoration: none;
color: inherit;
a#logo-link:active
text-decoration: none;
color: inherit;
ul#main-links > a > li > span.word-position
position: relative;
top: 5px;
#menu-icon
height: 48px;
width: 48px;
display: none;
cursor: pointer;
background-image: url("../images/hamburg-white-2.png");
#main-container
padding-top: 71.4px;
@media screen and (min-width: 656px)
ul#main-links
display: block !important;
@media screen and (max-width: 656px)
nav
height: initial;
#logo
width: 100%;
float: none;
padding-left: 0;
text-align: center;
bottom: 8px;
#menu-icon
display: inline-block;
/* float: right;*/
position: absolute;
right: 10px;
top: -2px;
ul#main-links
display: none;
float: none;
padding-right: 0;
padding-left: 0;
width: 100%;
ul#main-links li
width: 100%;
display: block;
border: none;
padding: 10px 0;
ul#main-links li:not(.last-child)
border-bottom-style: solid;
border-bottom-color: rgb(238, 0, 0);
border-bottom-width: 2.5px;
ul#main-links > a > li > span.word-position
top: 0px;
#main-container
padding-top: 62.4px;
@media screen and (max-width: 400px)
#logo
bottom: 7.5px;
font-size: 23px;
padding-left: 10px;
text-align: left;
#menu-icon
height: 32px;
width: 32px;
background-image: url("../images/hamburg-white-1.png");
top: 0.4px;
right: 20px;
#main-container
padding-top: 52.4px;
/* ----INTORDUCTION---- */
#introductory-background
background-image: url('../images/eternity-1024x768.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
/* min-height: 527px;*/
height: 90vh;
background-size: 100% 100%;
overflow: auto;
#introductory-overlay
display: table;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
#introductory-content
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
#introductory-container
position: relative;
bottom: 60px;
h1#role-header
display: block;
position: relative;
right: 5em;
opacity: 0;
font-size: 48px;
color: rgb(255, 250, 250);
h3#role-support-text
display: block;
opacity: 0;
position: relative;
top: 20px;
font-size: 30px;
color: rgb(255, 250, 250);
#read-more
border-radius: 38px;
background-color: rgb(255, 250, 250);
padding: 0.5em 1.5em;
font-size: 24px;
cursor: pointer;
@media screen and (max-width: 656px)
#introductory-container
bottom: 60px;
h1#role-header
font-size: 37px;
h3#role-support-text
top: 15px;
font-size: 24px;
#read-more
font-size: 19px;
@media screen and (max-width: 400px)
#introductory-container
bottom: 72.5px;
h1#role-header
font-size: 28px;
h3#role-support-text
top: 11px;
font-size: 20px;
#read-more
font-size: 16px;
/* -------------------- */
/* -------ABOUT-------- */
#about-section
width: 100%;
height: 500px;
background-color: rgb(131, 111, 235);
#photo-frame
margin: 0 auto;
background-color: royalblue;
width: 180px;
height: 180px;
border-radius: 100px;
border-style: solid;
border-color: beige;
border-width: 7.5px;
z-index: 2;
#photo-frame > #picture
width: 100%;
height: 100%;
background-image: url('../images/Ed.png');
border-radius: 100px;
#about-section > #about-text-container
margin: 0 auto;
width: 80%;
#about-section > #about-text-container > p
margin: 0;
text-align: center;
/* padding: 0 3rem;*/
font-size: 22px;
#about-section > #about-text-container > p.side-by-side
/* display: inline-block;*/
width: 45%;
text-align: justify;
#about-section > #about-text-container > p#about-left-side
float: left;
#about-section > #about-text-container > p#about-right-side
float: right;
@media screen and (max-width: 868px)
#about-section > #about-text-container > p.side-by-side
/* display: inline-block;*/
width: 100%;
#about-section > #about-text-container > p#about-left-side
float: none;
padding-bottom: 1.5rem;
#about-section > #about-text-container > p#about-right-side
float: none;
@media screen and (max-width: 656px)
#photo-frame
width: 150px;
height: 150px;
#about-section > #about-text-container
width: 90%;
#about-section > #about-text-container > p
text-align: justify;
padding: 0 1.5rem;
font-size: 20px;
@media screen and (max-width: 400px)
#photo-frame
width: 125px;
height: 125px;
#about-section > #about-text-container
width: 100%;
#about-section > #about-text-container > p
padding: 0 0.5rem;
font-size: 18px;
/* -------------------- */
/* -------FOOTER------- */
footer
width: 100%;
background-color: black;
footer > p#footer-text
margin: 0;
text-align: center;
font-family: arial;
color: rgb(169, 169, 169);
padding: 20px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* -------------------- */
.no-select
-webkit-touch-callout: none; /* ios Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
.clearfix:before,
.clearfix:after
content: " ";
display: table;
.clearfix:after
clear: both;
.clearfix
*zoom: 1;
【问题讨论】：
【参考方案1】：试试这个：
#about-section
width: 100%;
background-color: rgb(131, 111, 235);
说明
您正在使用#about-section id 删除高度属性或使用height:auto，您已经给定了一个固定高度。并在 p 标签 ID 中使用 float:left。
here your update code
【讨论】：
完美运行。谢了哥们。我完全忘记了我有固定的高度值（这只是一个临时措施）。我应该知道的更好。我必须添加 clearfix，因为当窗口高于 868px 时，因为我遇到了同样的问题，但现在一切正常。谢谢！【参考方案2】：所以这归结为您的 p.side-by-side 定义，它设置为 45%。
如果您不想在小屏幕尺寸上设置列，则方法是仅设置 45% 的值，并在移动设备上方设置一个断点。
您使用的是非移动优先方法，这让这件事变得更难（在我看来）。更简单的方法是不对这些列添加任何宽度样式，并且只添加 45% 和浮动，一旦屏幕高于（比如说）768px。换句话说，您的媒体查询通常会有 min 值，而不是 max。
我认为开始考虑移动优先的一个好方法是意识到移动布局使用的 CSS 比桌面“更少”。所以你保持简单，只使用语义 html，然后随着屏幕尺寸的增加添加样式以开始制作列等。
【讨论】：
你认为你可以给我一个 jsFiddle 的例子来说明你会怎么做吗？以上是关于CSS Float 内容创建空白并重叠其他 div的主要内容，如果未能解决你的问题，请参考以下文章
CSS如何控制 2个div 的 部分 重叠在一起 并将其中一个div的内容固定显示在上层