BFC

by karthick6891

HTML

<div class="container">
  <div>Sibling</div>
  <div>Sibling</div>
</div>



<div class="containera">
  <div class="floated">
   Floated DIV
  </div>
  <p class="oh bfc">Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet.Lorem ipsum dolar sit amet</p>
</div>

CSS

.container {
  background-color: green;
  border: 1px solid black;
  overflow: hidden; /* comment or uncomment */
}

.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}


.containera {
  width: 500px;
  min-height: 280px;
  border: 1px solid #aaa;
  padding: 10px;
}

.floated {
  float: left;
  margin: 5px;
}

p {
  margin: 0;
  text-align: left;
  background-color: green;
  color: white;
  padding: 10px;
}

.bfc {
  /*overflow: hidden;*/ /* comment or remove class from html*/
  display: flow-root;
}

/* general styling */

body {
  text-align: center;
}

button {
  margin-top: 30px;
}

.container {
  margin: 10px auto;
}

h2 {
  text-align: center;
}

.p {
  background: none;
  padding-top: 100px;
  font-size: 13px;
  text-align: center;
  color: black;
}
/* general styling ends */