我有以下标记:
<html>
<head>
<meta charset="utf-8">
<title>float</title>
<style>
.layer1 {
float: left; /* Обтекание по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin-right: 20px; /* Отступ справа */
width: 40%; /* Ширина блока */
}
.layer2 {
width: 30px;
float: left;
}
</style>
</head>
<body>
<div class="layer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div class="layer2">
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla facilisi.
</div>
</body>
</html>
我的问题如下:如果第 2 层有 float ，那么我的两个 div 是同一行；如果我从 layer2 中删除 float 并仅保留宽度，则此 div 将转移到下一行。为什么？
另外，我是前端的初学者，我需要学习它。哪些书籍/类(class)可以帮助我学习？提前致谢!
最佳答案
这里的“问题”不是一个，而是标准的 float 行为。检查我的代码片段以查看 .layer2 在哪里真的位于。 .layer2实际上开始于与 .layer1 相同的 x 坐标, 否则它不会在 .layer1 左右浮动, 但它宁愿是一个新专栏。如果那是你想要的，你需要给 layer2与 .layer2 一样多像素的 margin-left的宽度。
.layer1 {
box-sizing: border-box;
float: left;
background: rgba(255, 230, 240, 0.5);
border: 1px solid black;
padding: 10px;
width: 40%;
}
.layer2 {
background: rgba(200, 200, 200, 0.5);
width: 80px;
}
.additionalClass {
margin-left: 40%;
}<div class="layer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div class="layer2">
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.</div>
<div class="layer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div class="layer2 additionalClass">
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>除此之外，重要的是要知道 <div>属于所谓的 block 级元素。因此它有几个标准行为，其中之一是在它之前换行并在它之后换行。
例如， block 级元素的另一个标准行为是，如果您不指定 width或 max-width , 它捕获了它可以水平获得的所有空间。
如果您应用 float: left;，这两种标准行为都会丢失或 float: right;到元素。
关于html - 为什么有宽度但没有 float 的 div 是 o 下一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30412248/