CSS div margin ignored

Question

I was practising positioning divs by CSS and I found out margin of div being ignored. I cannot understand why margin-top of b2 is being ignored. When I modified margin-bottom of b1, there was a space between two divs.

.b1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
}

.b2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  clear: both;
  margin-top: 100px;
}

<div class="b1"></div>
<div class="b2"></div>

Does this answer your question? [Why top margin of html element is ignored after floated element?](https://stackoverflow.com/questions/1883414/why-top-margin-of-html-element-is-ignored-after-floated-element) — Run_Script, Jul 17 '20 at 17:15
You don't need to use float now. Use FLEXBOX, https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or for more complicated grid layout use GRID, https://css-tricks.com/snippets/css/complete-guide-grid/ — Shyam, Jul 17 '20 at 17:26

score 1 · Answer 1 · answered Jul 17 '20 at 17:16

The problem is that only one of the divs had the float property. If you add float: left; to .b2 then it works as expected.

.b1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
}

.b2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  clear: both;
  margin-top: 100px;
  float: left;
}

<div class="b1"></div>
<div class="b2"></div>

CSS div margin ignored

1 Answers1