HTML / CSS

上級編:結局、clear: both; って何なの?

floarの潜り込み(回り込み)解除に頻繁に用いられるclear: both; に関する理解を深めます。

問題: 1


はじめに


今回扱っているclearfixはこちらです。


sample.css
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

まだ理解が追いついていない人は、以下の問題を先に解いてみましょう。


初級編:clearfixを書いてみよう。
中級編:clearfixについて、きちんと説明できますか?


事前準備


前回に引き続き、以下のコードを準備してください。


sample.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>float問題</title>
  <link rel="stylesheet" href="style.css">
</head>
  <body>
    <div class="contents">
      <div class = "clearfix"> 
        <div class="float_left"></div>
        <div class="float_right"></div>
      </div>
      <div class="bottom_content">
      </div>
    </div>
  </body>
</html>

style.css
.contents {
  height: 1000px;
  background-color: orange;
  border: 1px solid black;
}

.float_left { float: left; background-color: blue; height: 300px; width: 500px; }
.float_right { float: right; background-color: green; height: 200px; width: 500px; }
.bottom_content { background-color: black; width: 100%; height: 150px; color: #FFF; }
.clearfix:after { content: "これがclearfixの正体だ!!!!!"; clear: both; display: block; color: white; background-color: gray; }

現在このようになっています。
https://tech-drill.s3.amazonaws.com/uploads/questions/images/26b756407fd4001110cf7138ecc6ce19.png


問題です。


.clearfix:after クラスの clear プロパティを”right” とすると、どのようになるでしょうか?


またその理由を説明してください。