css - float 元素 : two ways of doing it, 哪个更正确?

标签 css css-float

我只是想将一个 div 放在另一个旁边。我发现了两种不同的方法。你在下面有它们。但我不知道他们哪个更正确..

<html>
<head>

<style type="text/css">

.jander1{
  width: 100px;
  height: 100px;
  float: left;
  border: 5px solid;
}

</style>

</head>
<body>
  <div class="jander1">jander1</div>
  <div class="jander1">jander1</div>
</body>
</html>

<html>
<head>

<style type="text/css">

.jander1{
  width: 100px;
  height: 100px;
  float: left;
  border: 5px solid;
}

.jander2{
  width: 100px;
  height: 100px;
  margin-left:100px;
  border: 5px solid;
}

</style>

</head>
<body>
<div id="container">
  <div class="jander1">jander1</div>
  <div class="jander2">jander2</div>
</body>
</html>

贾维

最佳答案

float 两者更简单,这意味着如果您在前两个旁边添加更多元素,则不必小心。只 float 一个更不寻常,当您想要实际的 float 效果时更常使用(例如围绕 float 元素的文本环绕)。

正如 krs1 所说,您可能希望使用某种方法来清除 float 。最简单的方法是拥有一个包含元素(如第二个示例中所示),并对其应用 overflow: hiddenoverflow: auto 。这可能会产生副作用(如果框中的内容溢出),但不会使您的标记复杂化。

#container { overflow: hidden; }
#container div { width: 100px; height: 100px; float: left; }

关于css - float 元素 : two ways of doing it, 哪个更正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5807842/

相关文章:

javascript - 单击链接时使内容滑入和滑出?

CSS 帮助 : floating an image inside a list item hides icon

html - 在 HTML 结构中比段落中的文本更靠右的图像 float

css - 为什么后续的同级元素仍然卡在前一个同级元素的下方?

html - 防止 LI 文本在内联列表的 LI 内换行;打破换行列表

html - 页眉不会转到顶部的边缘

android - 将文本保留在 Android 浏览器的屏幕上

css - 使用 div 标签在我的网站周围设置边框时出现问题

html - 如何更改图像的位置而不影响其左侧的文本?

jquery - 在不破坏布局的情况下使用文本区域调整大小功能