负边缘右侧，左浮子在父容器中
学习CSS的基础知识，并正在使用浮子进行布局。我知道CSS网格和Flexbox是最佳实践，我打算学习它们，但想在继续前进之前了解浮子的基础知识。
body {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 600px;
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}
.col-main {
float: left;
width: 100%;
}
.col-left {
position: relative;
float: left;
width: 200px;
margin-left: -100%;
right: 200px;
}
.col-right {
float: left;
width: 125px;
margin-right: -125px;
}<body>
<div class="wrapper">
<div class="col-main">Main Content</div>
<div class="col-left">Left Content</div>
<div class="col-right">Right Content</div>
</div>
</body>在直观的级别上，我了解.col-left的工作方式。 保证金 - 左：-100％;表示父元素的600px宽度，将其放在side .col-main 和位置：相对; complined使用右：200px;将其冲入父元素的保留左侧填充物中。实际上，它不必是-100％可以是-200％（如果您愿意），并按下.col-Left完全在屏幕上。
但是，我无法掌握.col-right的工作方式。在边缘右中具有负值等于width将.col-Right放在同一行中，整齐地粘贴在父元素的右侧。太好了，但我不明白如何或原因。更重要的是，如果您将保证金 - 权利更改为-200px或heck甚至-1000px，它仍然处于同一位置。为什么？
Learning CSS basics and was doing layouts with floats. I know CSS Grid and Flexbox are best practice and I intend to learn them, but wanted to understand the basics of floats before I move on.
body {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 600px;
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}
.col-main {
float: left;
width: 100%;
}
.col-left {
position: relative;
float: left;
width: 200px;
margin-left: -100%;
right: 200px;
}
.col-right {
float: left;
width: 125px;
margin-right: -125px;
}<body>
<div class="wrapper">
<div class="col-main">Main Content</div>
<div class="col-left">Left Content</div>
<div class="col-right">Right Content</div>
</div>
</body>On an intuitive level I understand how .col-left works. margin-left: -100%; represents 600px width of the parent element placing it along side .col-main and position: relative; combined with right: 200px; puts it flush within the reserved left padding of the parent element. In fact, it doesn't have to be -100% it can be -200% if you like and push .col-left completely off the screen.
However, I cannot grasp how .col-right works. Having a negative value in margin-right that's equal to the absolute value in width places the .col-right on the same line, neatly sticking out on the right side of the parent element. It's great but I don't understand how or why. What's more, is that if you change margin-right to -200px or heck even -1000px it will still be in the same position. Why?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
浮点的含义基本上是漂浮的:)。您可以插入价值您想要多少。但最终它漂浮到正确。因为
包装器的宽度不足以更改为您的看到。如果将更多的宽度添加到包装器并将可扩展值指定为.col-main（例如50px）。您可以看到更容易理解的。因为.col-right在Over中.col -main。像Z-Index ShitsFloat's meaning is basically floating :). You can insert value How much you want. But in the end it floats to right. Because
wrapper's width not enough to changing to your see. if you add more width towrapperand specify scalable value to.col-main(like 50px). You can see more understandable. Because.col-rightis in over.col-main. like z-index shits