HTML / CSS

初級編:clearfixを書いてみよう。

float の潜り込みを解消するのにかならず必要なclearfix、正しくかけますか?

問題: 1


はじめに


ある要素に対してfloatプロパティを適用すると、その下にある要素はfloatしている要素の下に潜り込んでしまいます。
https://tech-drill.s3.amazonaws.com/uploads/questions/images/hoge_hoge_omajinai.png


以下がそのコードです。


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="float_left"></div>
      <div class="float_right"></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; }

それでは問題です。


以下のcssを完成させてstyle.cssに追記してください


style.css



.clearfix:after {
  content:   ###
  clear:   ###
  display:   ###
}

問題: 2


問題1で完成させたクラス”clearfix”をつけたdivタグを、sample.htmlの適切な位置に挿入し、bottom_contentが潜り込まないようにしてください。


以下の様な状態になれば正解です。


https://tech-drill.s3.amazonaws.com/uploads/questions/images/c3e70dd92eb2d55690a2f6074cd1d422.png


sample.html

# 適切な位置にclearfixのついたdivタグを挿入してください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float問題</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="contents"> <div class="float_left"></div> <div class="float_right"></div> <div class="bottom_content"></div> #この要素が潜り込んでいる </div> </body> </html>