N ways to clear both

One common problem is that when children divs are floated inside a parent div, the parent div is not aware of the height of children divs.

The code to begin with:


<div class="parent">
  <div class="child">c1</div>
  <div class="child">c1</div>
  <div class="child">c1</div>
</div>

.parent {
  border: 1px solid black;
}
.child {
  float: left;
}

Solution one – change the css of the parent to

.parent {
  border: 1px solid black;
  overflow: auto;
  width: 100%;
}

Solution two – add an extra div, and apply clear:both

<div class="parent">
  <div class="child">c1</div>
  <div class="child">c1</div>
  <div class="child">c1</div>
  <div class="clearfix"></div>
</div>
.parent {
  border: 1px solid black;
}
.child {
  float: left;
}
.clearfix {
  clear: both;
}
Advertisements
Standard