ただ日々を記すもの

意識高めを装うことができます

中身のコンテンツをfloatにすることで発生するレイアウト崩れをoverflowで解決する方法

デザイン

中身をfloatにすることで起こる、レイアウト崩れを解消する方法。 overflowを使う！

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML+CSS</title>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    <div class="contents">
      <h1>Layout</h1>
      <div class="box">
        <h2>Box 1</h2>
        <p>
          hello world hello world hello world hello world
          hello world hello world hello world hello world
        </p>
      </div>
      <div class="box">
        <h2>Box 2</h2>
        <p>
          hello world hello world hello world hello world
          hello world hello world hello world hello world
        </p>
      </div>
      <div class="box">
        <h2>Box 3</h2>
        <p>
          hello world hello world hello world hello world
          hello world hello world hello world hello world
        </p>
      </div>
      <div class="box">
        <h2>Box 4</h2>
        <p>
          hello world hello world hello world hello world
          hello world hello world hello world hello world
        </p>
      </div>
    </div>
  </body>
</html>

.contents {
  overflow: hidden;
  ...
}
.box {
  float: left;
  ...
}