BFC

bfc to prevent text wrapping around a floated element

by JuneDeng

HTML

<div class="container">
  <div class="floated">
    <img src="https://img1.doubanio.com/view/photo/raw/public/p2277484017.jpg" alt="">
  </div>
  <p class="oh">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat distinctio officia amet eaque placeat excepturi velit maiores possimus doloremque, architecto esse aspernatur sequi repellendus explicabo nisi, itaque dicta. Consequuntur, explicabo!</p>
</div>

<button>TOGGLE BFC</button>

CSS

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

.floated {
  float: left;
  margin: 5px;
}
img {width: 250px;}

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

.bfc {
  overflow: hidden;
}


button {
  margin-top: 30px;
}

JavaScript

var btn = document.querySelector('button'),
    p = document.querySelector('p');
btn.addEventListener('click', function () {
  p.classList.toggle('bfc');
}, false);