HTML5 ve CSS3 Programlama için Bir Paragraf Nasıl Float Edilir - mankenler

Paragraflar ve diğer blok düzeyindeki öğeler CSS3'te iyi tanımlanmış bir varsayılan davranışı vardır. Sayfanın tüm genişliğini alırlar ve bir sonraki öğe aşağıda görünür. Elemanı bir paragrafa uyguladığınızda, o paragrafın davranışı çok değişmez, ancak paragrafında başarılı olan paragraflarındaki davranış değiştirilir.

Üç paragrafa sahip bir sayfaya bakarak başlayın. Paragraf 2'nin float özelliği sola ayarlı.

Gördüğünüz gibi, bazı garip biçimlendirme burada sürüyor. Neler olup bittiğine bir göz atın:

• Paragraflara sınırlar eklenmiştir. Gördüğünüz gibi, bir öğenin genişliği içeriğine bakarak her zaman açık değildir. Şamandıra ile uğraşırken, paragraflara sınırlar eklemek akıllıca olabilir, böylece neler olduğunu görebilirsiniz. Sınırları istediğiniz zaman çalıştığınızda çıkarabilirsiniz.

• İlk paragraf normal şekilde hareket eder. İlk paragraf, tüm blok stili öğelerinde gördüğünüz davranışa benzer. Sayfanın tüm genişliğini alır ve sonraki öğe bunun altına yerleştirilir.

• İkinci paragraf oldukça normaldir. İkinci paragrafın float özelliği sola ayarlanmıştır. Bu, paragrafın normal konumuna yerleştirileceği, ancak diğer metnin bu öğenin sağına yerleştirileceği anlamına gelir.

• Üçüncü paragraf sıska görünüyor. Üçüncü paragraf ikinciyi çevreliyormuş gibi görünüyor, ancak metin sağa itilir. Önceki paragraftaki float parametresi, kalan alana (şu an çok fazla değil) yerleştirilmesine neden olur. Kalan alan sağda ve sonuçta ikinci paragrafın altındadır.

Bunun üretilmesi için kod, eşit derecede basit CSS biçimlendirmesine sahip basit bir HTML'dir:

floatDemo p {border: 2px black solid;}. float {float: left;}

Float Demo
Paragraf 1. Bu paragraf, bir blok seviyesi unsurunun normal davranışına sahiptir. Sayfanın tüm genişliğini kaplar ve bir sonraki öğe altına yerleştirilir.
2. Paragraf. Bu paragraf, soldan süzülür. Sola yerleştirilir ve sonraki öğe onun sağına yerleştirilir.
Paragraf 3. Bu paragrafta yüzen, genişlik veya kenar boşluğu bulunmamaktadır. Yüzen unsurun sağındaki herhangi bir alanı alır ve sonra bir sonraki satıra akar.

Koddan da görebileceğiniz gibi, float özelliği sola dönük olarak float denilen basit bir sınıf vardır. Paragraflar sıradan bir şekilde tanımlanmıştır. Paragraf 2, paragraf 3'te ekran görüntüsünde gömülmüş gibi görünse de, kod açıkça bunun olmadığını göstermektedir.İki paragraf tamamen ayrı.