Làm thế nào để có được hai divs cạnh nhau?

Nếu ai đã từng thao tác cùng với CSS, chắc ko hề lạ gì 2 tư tưởng float cùng clearfix, tuy nhiên hoàn toàn có thể một số trong những bạn cđọng biết tác dụng của nó và cđọng dùng vậy thôi chứ đọng ko biết (hoặc ko thèm quan liêu tâm) tại sao sử dụng nó thì có công dụng như vậy.

Bài viết sau bản thân đã quay về cơ phiên bản một tí nhằm lý giải cụ thể công dụng cùng phương pháp hoạt động của 2 có mang này.

You watching: Làm thế nào để có được hai divs cạnh nhau?

Floating

Mặc định, một thẻ div đang chiếm phần không còn một cái, và không tồn tại một element nào hoàn toàn có thể nằm ở sau nó được, mà lại cần sang một dòng khác.

lấy một ví dụ cùng với đoạn code sau:


...
...
...
Ta có kết quả nlỗi hình sau:

*

Nhưng nhiều khi bọn họ mong bố trí các đối tượng nối tiếp nhau trên thuộc 1 chiếc. lúc kia bọn họ sẽ đề nghị dùng một thuộc tính của CSS gọi là float, tính năng của ở trong tính này là để cho những element nằm ngay sau nó bị trôi theo element mang nằm trong tính float.

Ví dụ, họ gán ở trong tính float: left; cho những div có class là box như sau:

.box float: left; ...Kết trái là các thẻ div đã ở lên thuộc 1 cái, như hình sau:

*

Có 2 hình trạng là float: left và float: right, khớp ứng với 2 chiều "trôi" của element lịch sự trái với đề xuất.

Clear float

Trong trường thích hợp chúng ta muốn bỏ trực thuộc tính float của một element đi, ví dụ trong trường vừa lòng sống hình sau:

*

Chúng ta không muốn DIV 3 bị trôi theo DIV 2 mà lại hy vọng nó nằm trên một loại lẻ tẻ, khi đó, chúng ta dùng thuộc tính clear.

See more: Tuyển Tập Những Bài Hát Hay Về Bạn Bè, Tuyển Tập Những Bài Hát Hay Nhất Về Tình Bạn

Chức năng của ở trong tính này là dọn con đường thông nhoáng trở về bên cạnh trái left hoặc phải right hoặc cả phía 2 bên both, lúc bị dọn dẹp vệ sinh thật sạch như thế thì element này sẽ ko bị trôi theo element trước đó nữa.

Ở ví dụ trên, bọn họ đang gán thêm một ở trong tính clear: left cho DIV 3, có class là red, lau chùi và vệ sinh Phần bên trái của chính nó để cấm đoán nó trôi theo DIV 2 nữa.

.red clear: left;Vấn đề của floatLúc áp dụng float, hẳn bọn họ đã chạm chán phải số đông trường hợp lỗi vô cùng khó chịu, ví dụ như vậy này:

*

Tại trên đây chúng ta bao gồm một thẻ div phụ vương (parent), chứa 4 thẻ div con có thuộc tính float: left, nếu bao gồm thêm 1 câu chữ ở sau div phụ vương, thì nội dung này có khả năng sẽ bị 4 thẻ div con đè lên. Hoặc ví như chúng ta cần sử dụng dev tool của trình trông nom để soát sổ, sẽ thấy trực thuộc tính height của div phụ thân này bởi 0.

See more: Business - Hiệu Suất Sử Dụng Tổng Tài Sản Hệ Số Nợ

Lý vì chưng là do trình cẩn thận bắt buộc tính được độ cao của div cha đựng những div có ở trong tính float, đề nghị những element nằm sau div phụ thân này có khả năng sẽ bị những div nhỏ đó đè lên trên.

Cách giải quyết

Để giải quyết sự việc bên trên, chúng ta cũng có thể ckém thêm một thẻ div ở ở vị trí ở đầu cuối, đằng sau những thẻ div float, thẻ div ở đầu cuối này được gán trực thuộc tính clear: both, tất cả trách nhiệm dọn dẹp và sắp xếp phía 2 bên đường, với đâm vào ở ở phần dưới cùng, từ đó nó sẽ "kéo" thẻ div phụ thân về lại đúng độ cao của chính nó. Ví dụ: