Mục lục:
Video: Học lập trình Web A-Z - CSS - Bài 14 - Làm chuyển động 2D và 3D 2025
Đoạn và các phần tử cấp khối khác có hành vi mặc định được định nghĩa rõ ràng trong CSS3. Họ chiếm toàn bộ chiều rộng của trang và phần tử tiếp theo xuất hiện bên dưới. Khi bạn áp dụng các phần tử vào một đoạn văn, hành vi của đoạn đó không thay đổi nhiều, nhưng hành vi của các đoạn kế tiếp được thay đổi.
Bắt đầu bằng cách nhìn vào một trang với ba đoạn. Khoản 2 có tài sản nổi được đặt ở bên trái.
Như bạn thấy, một số định dạng lạ đang xảy ra ở đây. Hãy xem những gì đang xảy ra:
-
Biên giới đã được thêm vào đoạn văn. Như bạn thấy, chiều rộng của một phần tử không phải lúc nào cũng rõ ràng bằng cách nhìn vào nội dung của nó. Khi bạn đang lộn xộn xung quanh với nổi, có thể khôn ngoan để thêm biên giới vào các đoạn văn để bạn có thể xem những gì đang xảy ra. Bạn luôn có thể gỡ bỏ các biên giới khi bạn có nó làm việc đúng.
-
Đoạn thứ nhất hoạt động bình thường. Đoạn đầu tiên có cùng một hành vi mà bạn thấy trong tất cả các phần tử kiểu khối. Phải mất toàn bộ chiều rộng của trang và phần tử tiếp theo sẽ được đặt bên dưới nó.
-
Đoạn thứ hai khá bình thường. Đoạn thứ hai có thuộc tính float của nó đặt ở bên trái. Điều này có nghĩa là đoạn sẽ được đặt ở vị trí bình thường, nhưng văn bản khác sẽ được đặt bên phải phần tử này.
-
Đoạn thứ ba có vẻ gầy. Đoạn thứ ba dường như bao quanh thứ hai, nhưng văn bản bị đẩy về phía bên phải. Tham số nổi trong đoạn trước gây ra một trong những này được đặt trong bất kỳ không gian còn lại (mà hiện nay không nhiều). Không gian còn lại nằm ở bên phải và cuối cùng bên dưới đoạn thứ hai.
Mã để tạo ra mã HTML đơn giản với đánh dấu CSS đơn giản:
floatDemo p {border: 2px black solid;}. float (float: left;}
Float Demo
Đoạn 1. Đoạn này có hành vi bình thường của một phần tử cấp block. Nó chiếm toàn bộ chiều rộng của trang, và phần tử tiếp theo được đặt bên dưới.
Đoạn 2. Đoạn này được thả nổi. Nó được đặt ở bên trái, và phần tử tiếp theo sẽ được đặt bên phải của nó.
Đoạn 3. Đoạn này không có nổi, chiều rộng hoặc lề. Nó mất bất kỳ không gian có thể để bên phải của các yếu tố nổi, và sau đó chảy vào dòng tiếp theo.
Như bạn thấy từ mã, có một lớp đơn giản được gọi là floated với thuộc tính float được đặt sang trái. Các đoạn văn được định nghĩa theo cách thông thường. Mặc dù đoạn 2 dường như được nhúng bên trong đoạn 3 trong hình chụp màn hình, mã rõ ràng cho thấy rằng đây không phải là trường hợp.Hai đoạn văn hoàn toàn riêng biệt.
