Explanation on CSS float overflow property

Question

I am a newbie to CSS. I started exploring CSS float property. I have two

elements inside a container. The two divs have equal

Answer 1

The float CSS property specifies that an element should be taken from the normal flow. However the non-float element still takes all the available width including the floating element. But if you set overflow: auto; or hidden to it, it will then align next to the floating element. See the demo following, it should explain it clearly.

.a1, .b1 {
    background: rgba(0,0,0,.5); /*pure black with alpha*/
    width: 50px;
    height: 50px;
    float: left;
}
.a2 {
    background: lime;
}
.b2 {
    background: lime;
    overflow: auto; /*let the browser decide whether to clip or not*/
}

hello
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.




hello
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.