I am leanring HTML and CSS. I have been muddled up by float
property. I don't why this is confusing me a lot. I am using these articles to understand. I got this part when we apply float
element is put out of the normal flow and floated to left and right of it's parent based on the value of float
and the content below it will flow around it and try to wrap it.
The part where I am confused is I'll explain by example. I have three div A, B, C. As I have shared in the snippet:
body {
background: #eaeaed;
}
div{
border : 2px solid #ff00ff;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.divA{
background: yellow;
}
.divB{
background: green;
}
.divC{
background: blue;
}
<div class="divA">
<span>Div A</span>
</div>
<div class="divB">
<span>Div B</span>
</div>
<div class="divC">
<span>Div C</span>
</div>
See Question&Answers more detail:os