CSS float 속성과 위치의 차이점에 대한 자세한 분석:absolute_Basic Tutorial

1. float 속성은 요소가 부동하는 방향을 정의합니다. 역사적으로 이 속성은 항상 이미지에 적용되어 텍스트가 이미지 주위를 둘러싸도록 했지만 CSS에서는 모든 요소가 부동될 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다. div는 그 자체로 한 줄을 차지하는 일반적인 블록 수준 요소입니다.

먼저 가장 기본적인 블록레벨 요소들이 어떻게 배열되어 있는지 살펴보겠습니다. html 코드에서는 이를 기반으로 다음 스타일이 적용됩니다.

코드 복사 코드는 다음과 같습니다.

t;
CSS 코드:





코드 복사


코드는 다음과 같습니다.

.boxBg{

여백: 0 자동;

너비:500px;

높이:200px; 테두리:2px 단색 #ccc } .box1{ 너비:100px; 높이:50px; 배경색:빨간색

}

.box2{
너비:100px;
높이:50px;
배경색:파란색
}
.box3{
너비:100px;
높이:50px;
배경색:녹색
}



실행 결과:




div는 블록 수준 요소이므로 상자는 수직으로 배열됩니다. 실제 작업에서는 프레임을 수평으로 배열해야 하는 경우가 많습니다. 이를 수행하는 방법에는 두 가지가 있습니다. 첫 번째는 display:inlin-block;

코드 복사

코드는 다음과 같습니다.

.boxBg{

여백: 0 자동;

너비:500px;

높이:200px; 테두리:2px 단색 #ccc } .box1{ 너비:100px; 높이:50px; 배경색:빨간색;

디스플레이:인라인 블록

}
.box2{
너비:100px;
높이:50px;
배경색: 파란색;
디스플레이:inline-block
}
.box3{
너비:100px;
높이:50px;
background-color:green;
디스플레이:inline-block
}



실행 결과:




중간 공백의 근본적인 이유는 요소 사이의 공백에서 비롯되므로 상위 요소에 fone-size 크기를 설정하면 공백의 크기를 조정할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

.boxBg{

여백: 0 자동;

너비:500px;

높이:200px; 테두리:2px 단색 #ccc; 글꼴 크기:34px;}

font-size:34px를 설정하면 간격이 더 넓어집니다.

실행 결과:




마찬가지로 공백을 제거하려면 글꼴 크기:0;
을 변경해야 합니다.

코드 복사

코드는 다음과 같습니다.

.boxBg{

여백: 0 auto;

너비:500px;

높이:200px; 테두리:2px solid #ccc; 글꼴 크기:0}

실행 결과:

이렇게 하면 원하는 레이아웃이 이루어지고 상자 안의 텍스트가 사라집니다. 이는 텍스트의 크기가 간격에 영향을 미친다는 것도 증명합니다. 하위 요소에서 재설정하면 됩니다. 물론 오늘의 초점은 그게 아니다. 동일한 효과 float:left도 쉽게 얻을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

실행 결과:

요소에 부동 소수점을 추가하면 부동 요소는 상위 요소나 다른 부동 요소의 테두리에 닿은 직후에 표시됩니다. 예를 들어 다음 예에서는 부동 요소의 전체 너비가 상위 요소보다 크면 줄이 줄 바꿈됩니다. 줄이 줄 바꿈되면 이전 부동 소수점이 발견되고 그 뒤에

가 표시됩니다.

코드 복사 코드는 다음과 같습니다.

실행 결과:

inline-block을 사용하면 어떤 결과가 나올까요?

코드 복사 코드는 다음과 같습니다.

Hasil pelaksanaan:

Pada masa ini, kotak 3 bermula pada baris baharu dan bukannya mengikut kotak 1 (jurang antara 1 dan 2 tidak akan dibincangkan di sini juga berbeza Menggunakan tetapan taip apungan boleh menghasilkan hasil yang berbeza daripada yang dijangkakan, jadi adalah baik untuk menggunakan apungan apabila lebar dan ketinggian kekal tidak berubah Jika ia tidak konsisten, anda perlu melihat reka letak khusus dan menggunakan atribut yang sesuai.

Kod disiarkan di bawah, hanya bahagian yang diubah suai disiarkan, selebihnya kekal tidak berubah, dan struktur kekal tidak berubah.

Apakah hasilnya jika pelampung: kiri kotak3 dialihkan? Mengikut pemahaman, elemen terapung tidak menempati ruang, iaitu bingkai 3 akan mengabaikan bingkai 1, dan bingkai 2 akan dipaparkan terus di sebelah sempadan elemen induk, iaitu bingkai 1 akan meliputi bingkai 3? keputusan?

Salin kod Kod adalah seperti berikut:

.box3{
lebar:100px ;
tinggi:50px;
warna latar belakang:hijau;
}

Hasil pelaksanaan:

Mengapakah teks dalam kotak 3 muncul di bawah dan bukannya dilindungi oleh kotak 1? Kemudian lihat kod dan gambar

Salin kod Kod adalah seperti berikut:

.box3{
tinggi:50px ;
warna latar:hijau;
}

Hasil pelaksanaan:

Adakah anda nampak perbezaannya? ya. box3 tidak mentakrifkan lebar; Tanpa menentukan lebar, lebar lalai ialah lebar elemen induk, yang bermaksud bahawa pada masa ini, lebar: 500px; , lebar 200px di hadapan kotak 3 diduduki oleh elemen terapung yang Dilindungi, mengapa teks tidak dilindungi dan teks dipicit 200px di belakang elemen terapung?

Elemen terapung tidak akan menduduki ruang blok, jadi kotak tiga ialah 100% daripada lebar bekas induk 500px, tetapi elemen terapung akan menduduki ruang lain, iaitu ruang kotak garisan, dalam istilah awam, ia adalah ruang yang diduduki oleh teks.

Ini juga sebab mengapa teks akan membungkus imej secara automatik selepas ia terapung. Unsur terapung tidak menduduki ruang peringkat blok, tetapi akan menjejaskan teks dan elemen sebaris dalam elemen peringkat blok.

Dalam kes ini, jika anda mahu tiga kotak mempunyai lebar yang sama, anda hanya perlu menukar lebar tiga kotak: 300px

Salin kod Kod adalah seperti berikut:

.box3{
lebar:300px ;
ketinggian:50px;
warna latar belakang:hijau;
}

Hasil pelaksanaan:

Sekarang kita telah selesai bercakap tentang terapung asas, mari bercakap tentang masalahnya Walaupun terapung mudah digunakan, ia juga akan menyebabkan banyak masalah dalam amalan. Contohnya:

.boxBg{
jidar: 0 auto;
kedudukan:relatif;
lebar:500px;
sempadan:2px pepejal #ccc;
latar belakang- color:#ccd;
}
.box1{
float:left;
width:100px;
height:50px;
background-color:red;
}
.box2{
float:left;
width:100px;
height:50px;
background-color:blue;
}
.box3{
float: kiri;
lebar:100px;
tinggi:50px;
warna latar:hijau;
}

Hasil pelaksanaan:

Masalah yang sangat biasa, dalam keadaan biasa. Latar belakang kelabu sepatutnya setinggi bingkai, tetapi realitinya sentiasa tidak memuaskan :)

Kita semua tahu bahawa punca keadaan ini adalah disebabkan oleh terapung Ya, ia dikatakan di banyak tempat bahawa unsur terapung akan terlepas dari aliran biasa, jadi unsur-unsur biasa boleh dianggap sebagai unsur terapung. tidak wujud, jadi tidak ada perkara seperti itu di sini Latar belakang dibuka, tetapi pelajar yang membaca dengan teliti akan ingat bahawa ia disebut di atas bahawa elemen terapung tidak akan menjejaskan kotak blok, tetapi akan menjejaskan kotak baris, iaitu teks atau sebaris elemen, sama ada elemen peringkat blok atau elemen sebaris. Malah, saya tidak fikir ada keperluan untuk memikirkan perkara-perkara konsep ini. Menurut pemahaman saya, elemen terapung tidak berada dalam ruang mendatar yang sama dengan elemen peringkat blok, tetapi dalam ruang yang sama dengan elemen sebaris teks, jadi sempadan di sini adalah bersamaan dengan berada di atas latar belakang, jadi ia tidak akan menjejaskan elemen latar belakang. Apa yang biasanya dipanggil membersihkan terapung, Ia tidak bermaksud untuk membuang atribut apungan unsur terapung, tetapi untuk membersihkan unsur terapung di sekelilingnya supaya tidak ada unsur terapung di sekelilingnya, jika anda mahu kotak 3 beralih ke baris kedua, anda tidak boleh menggunakan clear:right; dalam kotak 2. Anda perlu menggunakan clear:left;

dalam kotak 3

Salin kod Kod adalah seperti berikut:

.box3{
float:left ;
lebar:100px;
tinggi:50px;
warna latar belakang:hijau;
jelas:kiri
}

Hasil pelaksanaan:

ok! Sekarang saya faham perkara ini, mari kita bincangkan tentang cara membuat latar belakang dan bingkai mempunyai ketinggian yang sama Sudah tentu, ini bukan maksudnya. Mari kita bercakap tentang membersihkannya. Mula-mula, mari kita lihat contoh:

Salin kod Kod adalah seperti berikut:

     
    .boxBg{
    margin: 0 auto;
    position:relative;
    lebar:500px;
 px pepejal ;
    background-color:#ccd;
    }
    .box1{
    float:left;
    lebar:100px;
    tinggi:50px;
 : merah latar belakang ;
    }
    .kotak2{
    apung:kiri;
    lebar:100px;
    tinggi:50px;
    warna latar:biru;
    kotak {
    float:kiri;
    lebar:100px;
    tinggi:50px;
    warna latar:hijau;
    }
    .jelas{
       px lebar >    ketinggian:50px;
    }



   

    ; div class="box1">
        框框1
       

       

                                        gt;

        框框3
        

       

执行结果：

🎜以是跟背景一样，因此背景被撑开了。其实是用清除浮动的原理跟这个是一样的，也是想办法撑开背景；以上去掉clear的宽，高，加上clear属性

复制代码

代码如下:

.clear{;   clear >    }

执行结果：

这个可能还看不清楚，给clear框里边加几个字试试看

执行结果：

因为clear用了clear:left综上所述，clear左边不能有浮动元素，所以它必须以它必须倦社起中中文到图上的结果，其实还是用一个元素撑开的背景。当然还有其他方法实现，这里主要是讲清楚浮动就好了:)