neden
Sorun, yüzen öğelerin akış dışı olmasıdır :
Bir öğe yüzen, tamamen konumlandırılmışsa veya kök öğe ise akış dışı olarak adlandırılır .
Bu nedenle, çevre öğelerini bir akış içi öğenin yaptığı gibi etkilemezler .
Bu, 9.5 Kayan Noktada açıklanmıştır :
Bir şamandıra akışta olmadığından, şamandıra kutusundan önce ve sonra oluşturulan konumlandırılmamış blok kutuları, şamandıra yokmuş gibi dikey olarak akar. Bununla birlikte, şamandıranın yanında oluşturulan mevcut ve sonraki satır kutuları, şamandıranın kenar boşluğu kutusuna yer açmak için gerektiği şekilde kısaltılır.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling:after {
content: 'Block sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
<div class="float"></div>
<div class="block-sibling">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>
Bu ayrıca 10.6 Yükseklik ve kenar boşluklarının hesaplanmasında belirtilmiştir . İçin "normal" bloklar ,
Sadece normal akıştaki çocuklar dikkate alınır (yani, yüzen kutular ve kesinlikle konumlandırılmış kutular göz ardı edilir […])
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent:after {
content: 'Block parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 130px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
Hacky çözümü: temizleme
Sorunu çözmenin bir yolu, bazı yüzer öğelerin tüm şamandıraların altına yerleştirilmesini zorlamaktır. Daha sonra, ebeveynin yüksekliği o elemanı sarmak için büyür (ve böylece yüzer).
Bu kullanılarak elde edilebilir özelliği :clear
Bu nitelik bir elemanın kutu (ler) kenarları olabilecek gösterir değil
önceki bir hareketli kutulara komşu olacak.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent:after {
content: 'Block parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 84px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
.clear {
clear: both;
text-align: center;
height: 37px;
border: 3px dashed pink;
}
.clear:after {
position: static;
content: 'Block sibling with clearance';
color: pink;
}
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
<div class="clear"></div>
</div>
Yani bir çözüm clear: bothşamandıraların son kardeşi gibi boş bir eleman eklemek
<div style="clear: both"></div>
Ancak, bu anlamsal değildir. Öyleyse üst öğenin sonunda bir sözde öğe oluşturun :
.clearfix::after {
clear: both;
display: block;
}
Bu yaklaşımın birden çok varyantı vardır, örneğin :aftereski tarayıcıları desteklemek için kullanımdan kaldırılmış tek kolon sözdizimini kullanma veya gibi diğer blok düzeyi ekranları kullanma display: table.
Çözüm: BFC kökleri
Başlangıçta tanımlanan sorunlu davranış için bir istisna vardır: bir blok öğesi bir Blok Biçimlendirme Bağlamı oluşturursa (bir BFC köküdür), kayan içeriğini de sarar.
Bağlam köklerini biçimlendirmek için 10.6.7 'Otomatik' yüksekliklerine göre ,
Elemanın alt kenar kenarı, elemanın alt içerik kenarının altında olan herhangi bir hareketli alt öğeye sahipse, yükseklik bu kenarları içerecek şekilde artırılır.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent.bfc-root:after {
content: 'BFC parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 127px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="block-parent bfc-root">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
Ek olarak, açıklandığı gibi 9.5 Float'larda , BFC kökleri aşağıdakiler nedeniyle de yararlıdır:
Bir tablonun kenarlık kutusu, blok düzeyinde değiştirilen bir eleman veya normal akıştaki yeni bir blok formatlama bağlamı oluşturan bir eleman […], elemanın kendisi ile aynı blok formatlama bağlamındaki herhangi bir yüzer kenar boşluğu kutusuyla çakışmamalıdır. .
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling.bfc-root:after {
content: 'BFC sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="float"></div>
<div class="block-sibling bfc-root">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>
Bir blok biçimlendirme içeriği
Örneğin overflowdışındaki blokları engelleyinvisiblehidden
.bfc-root {
overflow: hidden;
/* display: block; */
}
Blok kutu olmayan kapsayıcılar: ne zaman , veya displayolarak ayarlanır .inline-blocktable-celltable-caption
.bfc-root {
display: inline-block;
}
Kayan elemanlar: veya floatolarak ayarlandığında .leftright
.bfc-root {
float: left;
}
Kesinlikle konumlandırılmış öğeler: veya positionolarak ayarlandığında .absolutefixed
.bfc-root {
position: absolute;
}
Bunların taşan içeriği kırpmak, otomatik genişlikleri hesaplamak gibi istenmeyen yan etkileri olabileceğini unutmayın. sığacak şekilde daraltma algoritmasıyla veya akış dışı hale gelmesi . Dolayısıyla sorun, bir BFC oluşturan görünür taşmaya sahip bir akış içi blok düzeyinde öğeye sahip olmanın mümkün olmamasıdır.
Ekran L3 şu sorunları giderir:
Akış düzeni görüntü türlerini daha iyi ifade etmek ve bir öğeyi BFC kökü yapmak için açık bir anahtar oluşturmak üzere flowve iç ekran türleri oluşturuldu . (Bu, ve gibi hack'lere olan ihtiyacı ortadan kaldırmalıdır.flow-root ::after { clear: both; }overflow: hidden […])
Ne yazık ki, henüz tarayıcı desteği yok. Sonunda
.bfc-root {
display: flow-root;
}