css clearing

css clearing example

by sungwoo KIM

HTML

<html>
  <head>
  </head>
  <body>
    <div class="float-container">
      <img src="https://s3.ap-northeast-2.amazonaws.com/file.welaenglish.co.kr/512x512.png">
      <p>This is first line with floating image.</p>
      <p class="clear-area">This is second line with cleared property.</p>
    </div>
  </body>
</html>

CSS

.float-container {
  width: 320px;
  border: 2px solid #09c;
}

.float-container img {
  width: 80px;
  height: 80px;
  float: left;
  margin: 5px;
  padding: 5px;
  border: 2px solid #90C;
}

.clear-area {
  clear: both;
}