Nasıl CSS Block Formatting Context çalışıyor mu?

CSS2.1 özellikler bloğu kapsamında biçimlendirme, kutuları dikey olarak üstten başlayarak yerleştirilir olduğunu söylüyor. Bu olursa eğer blok kutusunu yeni bir blok içerik biçimlendirme kurulan eğer başka şekilde elemanları süzülüyor, eğer orada bile olur. Bildiğimiz gibi, bir blok içerik biçimlendirme kutuları blok oluşturma, eleman süzülüyor tarayıcıları atlandığında, neden yeni bir blok kapsamında işe biçimlendirme kurmak mı?

Nasıl kutuları (kutu ve kutu içi blok) normal akışını ortaya koydu.

Blok elemanları blok kutuları üreten bir yerde okumuştum, ama yüzen elemanları kullanıcı ajanı kutu çizer ve içeriği doldururken dikkate zaman göz ardı edilir. Yüzer elemanları kutuları ve diğer öğeleri sınırları çakışır ederken, çözüm yeni bir blok çakışan elemanları overflow:hidden kullanmak için içeriği biçimlendirme kuruyor.

Biçimlendirme bağlamında blok yeni "hala çıkmak değil mi", bir kutu çizimi ederken, aynı zamanda da yüzen elemanı davranıyorlar. biçimlendirme bloğu. Bu doğru mu yoksa "yeni blok biçimlendirme bağlamda?" I yanlış anlamış

Güncelleme:daha fazla soru

"Demek sütunlu tarzı düzenleri için yararlı oluyor bu davranış. tarafından Bu ana kullanımı ancak yüzen durdurmak için, bir söz "ana içeriği" div, aslında takas yan sütunlar süzülüyor, yani kaynak kodu daha önce görünür." bu yüzer

Anlamını anlamıyorum, bir örnek sunacağım, belki de beni anlayacaksınız.

CSS:

.content {
   background: #eee;
   color #000;
   border: 3px solid #444;
   width:500px;
   height:200px;
}

.float {
   background: rgba(0,0,255,0.5);
   border: 1px solid #00f;
   width: 150px;
   height: 150px;
   float: right;
}

p {
   background: #444; 
   color: #fff;
}

HTML:

     <div class="content">
        <h3>This is a content box</h3>
        <p>It contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> <b>line boxes</b> that are shortened to make room for the float. This is normal behaviour.</p>
        <div class="float">floated box</div>
     </div>

Yüzen kutu blok div content sınıf içeren üst şamandıra gerektiğini düşündüm. Eğer kayan kutusu daha önce görünürse ayrıca, biçimlendirme, sonra da olması gerektiğini düşünüyorum Ne gösterecektir.

HTML:

     <div class="content">
        <div class="float">floated box</div>
        <h3>This is a content box</h3>
        <p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
     </div>

Üretir:

Bunu nasıl izah edebiliriz? "Bağlam ve bağlam satır içi biçimlendirme biçimlendirme açıklamaya"? engelleyebilir miyiz

Block Formatting Contexts

Kesinlikle yerleştirilmiş yüzer elemanları, blok kaplar (gibi satıriçi blokları, tablo-hücreleri ve tablo başlıkları) bu bloğu değildir kutuları ve 'taşma'ile kutuları blok başka 'görünür' (dışında ne zaman değer için bulaşan görünüm penceresi)yeni blok bağlamlarda biçimlendirme kurmakonların içeriği için.

Benim bold ilekurmakbit önemlidir

Bu ne demek ** 14 (hiçbir şey görünmüyordu dışında) veya float inline-blockvb kullanmak öğenin alt öğelerinin düzenini sorumlu olur. O zaman hangi alt öğeleri "bu tamamen sınırlayıcı üst tarafından bulunan olmalılar yüzen veya çöken boşluklarını olsun.", içerdiği

Bir blok içerik biçimlendirme, her kutunun dış kenarına temas Sol Sol. taşıyıcı blok kenar ( sağdan sola biçimlendirme, sağ kenarları dokunmatik)

Yukarıdaki satırı ne anlama gelir:

Bir kutu sadece Dikdörtgen ve düzensiz şekilli değil, çünkü bu yeni bir blok iki yüzer arasında içerik (hatta yanında) biçimlendirme komşu yan yüzer etrafına sarın. Kutuları sadece ebeveynleri dokunmak kadar uzatabilirsiniz iç, çocuğu olmayan (RTL) sol kenar. Sütunlu tarzı düzenleri için yararlı oluyor bu davranış. Bu ana kullanımı ancak yüzen durdurmak için, bir söz "ana içeriği" div, aslında takas yan sütunlar süzülüyor, yani kaynak kodu daha önce görünür yüzer.

Float Clearance

Yüzer önceden tüm kaynak yüzerken tüm önceki süzülüyor elemanları, temizlemek gerekiyor normal şartlar kod, sadece "sütun"görüntülenir. Dan söylüyorum alıntı "yüzer izni görüşler"

Bu özelliğin hangi tarafı gösterir bir öğe çerçevelerinin olmayabilir bitişik önceki yüzen bir kutu için. 'Özelliği dikkate almaz' Temizle elemanın kendisi içinde yüzen yadiğer blok biçimlendirme bağlamlarda

Öyle bir üç sütun düzeni nerede sol ve sağ sütunlar süzülüyor sol ve sağ, sırasıyla, yan sütunlar şimdi yeni Blok Biçimlendirme Bağlamlarda, çünkü onlar süzülüyor (unutma şamandıra da bir özelliklerini kurmak yeni BFC), böylece mutlu bir şekilde yüzen liste öğeleri içinde onları ve onlar sadece açık yerleşir zaten içinde yan sütunlar artık bakım hakkında yüzen, daha önce kaynak kodu

İçerik veya Biçimlendirme ana içeriği yeni bir Blok oluşturmak için?

Şimdi bu ortadaki sütun, sadece marjı her iki taraftan yani görünen o ki oturup düzgünce arasında yüzen iki tarafı sütunlar ve kalan genişliği, yaygın bir şekilde almak istediğiniz genişliği ise merkezi sütun "sıvı" - girecek kadar kullanmaya ihtiyaç yüzer/boşluk içinde içerik dıv (bir ortak bir olay için kullananlar "clearfix" kesmek ya da şablonlar da dahil olmak üzere)

Bu çok basit bir kod:

CSS:

#left-col {
 border: 1px solid #000; 
 width: 180px; 
 float: left;
} 

#right-col {
 border: 1px solid #000; 
 width: 180px; 
 float: right; 
 height: 200px;
}

#content {
  background: #eee;
  margin: 0 200px;
}

.floated {float: right; width: 180px; height: 100px; background: #dad;}

HTML:

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
 <h3>Main Content</h3>
 <p>Lorem ipsum etc..</p>
 <div class="floated"> this a floated box</div>
 <div class="floated"> this a floated box</div>
</div>

Aşağıdaki üretir:

Genel olarak bu sorun, özellikle eğer herhangi bir arka plan renk ya da iç (ana içerik) yüzer - ilan yüzen ince (temizlenmiş değil henüz) yaptıklarını muhtemelen senin dışında onlaraamaonlar, H3'nın üst kenar boşluğu p'In alt kenar boşluğu gerçekten içerik dıv (lightgrey arka plan) tarafından bulunan değil.

Aynı basit teminatlı senaryo için yukarıdaki kodu ekleyin:

.clear-r {clear: right;}

CSS ve değiştirmek için ikinci bir HTML kutusu süzülüyor:

<div class="floated clear-r"> this a floated cleared box</div>

Bu sefer bu olsun:

İkinci kaydır sağ tarafını kapatıyor ama sağ kolonun tüm yüksekliği açılıyor. Sağ sütun söylediği gibi temizlemeden yani kaynak kodu daha önce satışa çıkardı! Muhtemelen de h3 p kenar boşluklarını not olsa da istenen etkiyi hala çökmüş olan (yer).

Bir Blok İçerik Biçimlendirme, çocukların iyiliği için tesis olun!

ve son olarak ana içerik sütun sorumluluk almakbir Blok İçerik Biçimlendirme olmak- içeriği : ana içeriği CSS ve . margin: 0 200px; Kaldır ^strong>EKLEYİNoverflow: hidden; ve bu olsun:

Bu muhtemelen çok fazla şey beklemek olur, not şimdi yüzer kontrol edemeyiz, onlar temiz düzgün görmezden sağ yan sütun, ve aynı zamanda h3 p boşlukları da bulunan yerine çöktü.

Geniş kullanım sıfırlar bu gün kenar boşlukları da daha az dikkat çekici (ve IE hala yetmiyor onlara çok doğru) ancak ne oldu merkezi "ana içeriği" olan oldu bir Blok Biçimlendirme Bağlam ve artık sorumlu kendi çocuğunu (torunu) elemanları. Aslında çok benzer Microsoft'un ilk günlerinde kavramı hasLayout, kullandığı aynı özellikler display: inline-block, float overflow başka bir şey görünür, ve tabii ki tablo hücreleri her zaman Düzen.. ancak olmadan hatalar ;)

Bu biraz yardımcı olur umarım, herhangi bir soru sormaya çekinmeyin!

Güncelleme: re soru: daha fazla bilgi

"Ama yüzen elemanları kullanıcı ajan kutu çizer ve doldururken dikkate zaman içerik yok sayılır." derken

Evet yüzer normalde konteyner kutularını kaplama, üst sınırları hakkında söylemek istediğin bu mu? Ne zaman bir blok eleman çizilir ve içerdiği mastar blok üst kendisi çizilmiş bir dikdörtgen altında kaydır ve "anonim satıriçi kutular" ya da kısaca "hat kutuları" nın diğer alt öğeleri olan kısaltılmış yapmak odası için kaydır

Bu kodu alın:

CSS:

#content {
   background: #eee;
   color #000;
   border: 3px solid #444;
}

.float {
   background: rgba(0,0,255,0.5);
   border: 1px solid #00f;
   width: 150px;
   height: 150px;
   float: left;
   margin: 10px;
}

p {
   background: #444; 
   color: #fff;
}

HTML:

<div id="content">
  <div class="float">floated box</div>
   <h3>This is a content box</h3>
   <p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>

Hangi üretir:

Ana öğe aslında kaydır sadece.. tamamen sarın değil mi kaydır içerir, olmadığına bakınkayanüstüne içerik olsaydın tutmak için ekleme içeriğe div olurdu sonunda sarma altından kaydır çünkü öyle olması gerek (anonim) "satırı kutuları" p eleman kısaltmak kendilerini artık.

Ben zaten renkli paragraf öğesi gördüğünüz gibi bu da aslında gider altına kaydır, darkgray plan paragraf başlatır, beyaz yazılı olduğu "anonim satır kutu" başlıyor - aslında onları bu "oda" için kaydır, sürece size aksi takdirde (yani değişikliği kapsamında)

Yeniden yönlendirme için yukarıdaki resim, olsaydın kenar boşluğu sol tarafındap öğesi, Evet olacak dur metin kaydırma altında alt kaydır çünkü "satır kutuları" (beyaz metin) yalnızca dokunmatik sol kenar konteyner, ve sen-ecek getirmek renkli arka plan p hakkı, açık kaydır, ama bu olmayacak değiştirilen davranış p'In biçimlendirme bağlamında. İlk resim yol üstünde merkezi sütun;) gibi