Css div problemi

Divler ile üstteki resimde görüdüğünüz gibi bir bölüm yapmam gerekiyor.

Kırmızı div , yeşil ve mavi divi tutan genel div oluyor
yeşil dive float left veriyorum maviye de float right bu şekilde düzgün yerleşiyorlar ancak kırmızı divin dışına çıkıyorlar yani kırmızı dive background verdiğimde yeşil ve mavi alanın arkaplanlarında bir etki olmuyor.

Bu sorunu nasıl düzeltebilirim ?

clearfix kullan hocam

hocam reset dosyası kullanıyorum yine de clearfix kullanmam gerekiyor mu ?
ve clearfix kullanımı hakkında önerebileceğiniz bir makale var mı ?

Hocam adım 1
reset.css dosyasına aşağıdaki satırları ekleyin

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

daha sonra kırmızı dive clearfix class'ını tanımlayın. Sorun çözülecektir

çok teşekkürler hocam şuan sorun ortadan kalktı peki bunu her divde kullanmam gerekir mi ? yani browserlerde sıkıntı çıkartamamsı açısından vs.

Evet eğer bir kapsayıcının içindeki diğer divlere float uygularsanız bu yöntemi uygulamanız gerekmektedir.

anladım çok teşekkürler