Căn giữa div và các chi tiết định vị khác. Định vị CSS

Định vị trong CSS có vẻ khá đơn giản. Cho biết khối nào và vị trí của nó. Tuy nhiên, mọi thứ không đơn giản như thoạt nhìn. Có một số điểm có thể gây nhầm lẫn cho người mới. Bạn có thể nhận được nhiều giá trị hơn từ việc định vị nếu bạn hiểu chi tiết cách thức hoạt động của nó.

Mô hình hộp trong CSS và các loại định vị.

Trước khi bắt đầu, tôi khuyên bạn nên đọc bài viết Box Model trong CSS. Tóm lại: mỗi phần tử trong html là một hình chữ nhật mà bạn có thể chỉ định các giá trị của lề trong và lề ngoài, cũng như đường viền ngăn cách chúng.

Sơ đồ định vị xác định vị trí của hình chữ nhật này cũng như cách nó ảnh hưởng đến các phần tử xung quanh nó.

Thuộc tính vị trí trong CSS có thể nhận năm giá trị:

tuyệt đối
liên quan đến
đã sửa
tĩnh
thừa kế

Giá trị tĩnh là mặc định. Bất kỳ phần tử nào có vị trí tĩnh đều nằm trong luồng chung của tài liệu. Các quy tắc cho vị trí của nó được xác định bởi mô hình Box. Đối với các phần tử như vậy, các thuộc tính top, right, Bottom và left sẽ bị bỏ qua. Để sử dụng các thuộc tính này, vị trí của phần tử phải là tuyệt đối, tương đối hoặc cố định.

Giá trị kế thừa, giống như tất cả các thuộc tính CSS khác, được sử dụng để đảm bảo rằng phần tử sử dụng cùng giá trị với phần tử cha của nó.

Định vị tuyệt đối

Định vị tuyệt đối sẽ loại bỏ một phần tử khỏi luồng tổng thể của tài liệu. Đối với các phần tử xung quanh, trong trường hợp này, chúng chỉ đơn giản bỏ qua phần tử được tìm kiếm, như thể nó có thuộc tính display: none; được đặt. . Nếu bạn không muốn không gian cho một phần tử như vậy bị lấp đầy bởi các phần tử khác, thì bạn cần phải nghĩ ra một cách tiếp cận khác.

Bạn đặt vị trí của một phần tử có vị trí tuyệt đối bằng cách sử dụng các thuộc tính top , left , right và Bottom . Bạn chỉ cần chỉ định hai trong số chúng, trên hoặc dưới và trái hoặc phải. Nếu không có thuộc tính nào được chỉ định thì cặp trên cùng bên trái được đặt thành 0.

Chìa khóa để định vị tuyệt đối là hiểu điểm tham chiếu của bạn là gì. Nếu thuộc tính trên cùng được đặt thành 20px thì chúng sẽ được tính từ đâu?

Câu trả lời rất đơn giản: các phần tử như vậy được định vị tương ứng với phần tử cha gần nhất, phần tử này có vị trí khác với static . Nếu không có phần tử nào như vậy thì phần tử đó sẽ được định vị tương ứng với tài liệu chính. Nghĩa là, khi đặt vị trí tuyệt đối, CSS sẽ yêu cầu trình duyệt xem xét phần tử gốc và nếu vị trí của nó không tĩnh thì nó sẽ căn chỉnh phần tử hiện tại so với nó.

Định vị tương đối.

Các phần tử có vị trí tương đối được đặt dựa trên vị trí của chính chúng, một sự dịch chuyển bình thường so với vị trí bình thường của chúng. Điều này tương tự như việc thêm phần đệm vào một phần tử bằng thuộc tính lề. Tuy nhiên, có một điểm khác biệt đáng kể: các phần tử liền kề, khi sử dụng định vị, không tính đến sự dịch chuyển này.

Hãy tưởng tượng nó theo cách này: một hình ảnh nhất định được dịch chuyển và ở vị trí của nó vẫn còn một "con ma"; tất cả các yếu tố đều được định vị tương đối với "con ma" này. Điều này cho phép chúng ta xếp các phần tử chồng lên nhau.

Do đó, các phần tử có vị trí tương đối được lấy từ luồng thông thường của phần tử nhưng vẫn ảnh hưởng đến vị trí của các phần tử lân cận, hoạt động sao cho phần tử ban đầu vẫn nằm trong luồng tài liệu.

Trong trường hợp này, chúng ta không nên đặt câu hỏi liên quan đến vị trí của phần tử ở đây. Câu trả lời luôn là: luồng tài liệu bình thường. Có vẻ như bạn đã thêm phần đệm vào một phần tử nhưng đồng thời không ảnh hưởng đến các phần tử lân cận.

Định vị cố định

Định vị cố định hoạt động tương tự như định vị tuyệt đối, với những khác biệt nhỏ.

Đầu tiên, phần tử có vị trí cố định luôn được định vị so với cửa sổ trình duyệt và phần tử gốc bị bỏ qua.

Sự khác biệt thứ hai đến từ tên gọi của nó. Các phần tử cố định được cố định trên trang. Chúng không di chuyển khi cuộn.

chỉ số Z

Trang web là hai chiều. Nó có chiều rộng và chiều cao. Chỉ số Z thêm chiều thứ ba, chiều sâu.

Chỉ số này càng cao thì phần tử đó nằm ở vị trí càng cao trên trang. Với nó, chúng ta có thể đảm bảo rằng một phần tử được đặt chồng lên phần tử khác. Theo mặc định, giá trị của nó bằng 0. Giá trị âm cũng được chấp nhận.

Trên thực tế, chỉ mục z phức tạp hơn nhiều so với những gì tôi mô tả ở đây, nhưng đó là chủ đề cho một bài viết khác. Bây giờ, điều chính cần nhớ là ý tưởng về chiều thứ ba và thực tế là chỉ các phần tử được định vị mới có thể sử dụng thuộc tính này.

Các vấn đề về định vị.

Chúng ta hãy xem xét một số vấn đề phổ biến liên quan đến việc định vị, cũng như một vài lời về cách giải quyết chúng.

Bạn không thể sử dụng thuộc tính vị trí và thuộc tính float trên cùng một phần tử cùng một lúc. Cả hai thuộc tính này đều ảnh hưởng đến vị trí của phần tử, do đó thuộc tính cuối cùng được chỉ định sẽ được sử dụng.
Từ các ý kiến:
Bạn có thể sử dụng vị trí: tương đối và float cùng một lúc.

Khi vị trí: tuyệt đối và float được chỉ định đồng thời, nó không phải là thuộc tính được chỉ định cuối cùng được áp dụng. Trong trường hợp này, bất kể thứ tự của các kiểu này, vị trí: tuyệt đối sẽ được áp dụng và giá trị kết quả (hoặc được tính toán) của thuộc tính float được đặt thành không, bất kể giá trị ban đầu, tức là. làm ngơ.
Lề không thu gọn trên các phần tử được định vị tuyệt đối. Giả sử có một đoạn văn trên trang có lề dưới là 20px. Tiếp theo là hình ảnh có lề trên 30px. Khoảng cách giữa hình ảnh và văn bản sẽ không phải là 50px (20px + 30px) mà là 30px (30px > 20px). Hành vi này được gọi là thu hẹp lợi nhuận. Hai vết lõm được kết hợp thành một. Các phần tử được định vị tuyệt đối không có lề để thu gọn nên kết quả có thể không như bạn mong đợi.
IE và chỉ mục z. Trong IE6, một phần tử luôn được chọn ở đầu ngăn xếp, bất kể chỉ mục z của nó hay chỉ mục z của các phần tử xung quanh.

IE6 và IE7 có một vấn đề khác với chỉ mục z. IE nhìn vào phần tử cha để xác định nhóm phần tử nào ở trên cùng của ngăn xếp, các trình duyệt khác sử dụng bối cảnh toàn cục. Ví dụ:

Chúng tôi hy vọng đoạn văn sẽ xuất hiện cao hơn hình ảnh vì chỉ số z của nó lớn hơn. Tuy nhiên, IE6 và IE7 đặt hình ảnh cao hơn vì chúng nằm trong các ngăn xếp tài liệu khác nhau. Một ngăn xếp dành cho div, ngăn xếp thứ hai dành cho img và hình ảnh có chỉ số z cao hơn div.

Phần kết luận

Thuộc tính vị trí đặt hành vi định vị của một phần tử theo một trong các sơ đồ định vị. Các giá trị thuộc tính có sẵn là tuyệt đối, tương đối, cố định, tĩnh (mặc định) và kế thừa.

Sơ đồ định vị xác định các quy tắc đặt một phần tử trên trang web, cũng như ảnh hưởng đến vị trí của các phần tử lân cận.

Thuộc tính z-index chỉ có thể được áp dụng cho các phần tử có thuộc tính vị trí được đặt. Nó thêm chiều thứ ba vào trang và đặt thứ tự ngăn xếp của các phần tử.

Thuộc tính vị trí có vẻ dễ hiểu nhưng nó hoạt động hơi khác một chút so với cái nhìn đầu tiên. Thông thường các nhà phát triển nghĩ rằng họ cần định vị tương đối, mặc dù rất có thể họ nên sử dụng định vị tuyệt đối. Về cơ bản, thuộc tính float được sử dụng trong quá trình bố trí và thuộc tính vị trí là cần thiết cho các phần tử mà bạn muốn “xé” khỏi luồng chung của tài liệu.

Vị trí bất thường!

Quyết định yếu tố nào sẽ hiển thị ở phía trước!

Các yếu tố có thể chồng lên nhau!

Định vị

Thuộc tính định vị CSS cho phép bạn định vị một phần tử. Họ cũng có thể định vị một phần tử phía sau phần tử khác và chỉ định điều gì sẽ xảy ra khi nội dung của phần tử đó quá lớn.

Các phần tử có thể được định vị bằng các thuộc tính trên, dưới, trái và phải. Tuy nhiên, các thuộc tính này sẽ không hoạt động trừ khi thuộc tính vị trí được đặt. Chúng cũng hoạt động khác nhau tùy thuộc vào phương pháp định vị.

Có bốn phương pháp định vị khác nhau.

Định vị tĩnh

Các phần tử HTML được định vị tĩnh theo mặc định. Phần tử được định vị tĩnh luôn được định vị theo luồng phần tử tiêu chuẩn trên trang.

Các phần tử được định vị tĩnh không bị ảnh hưởng bởi các thuộc tính trên, dưới, trái và phải.

Định vị cố định

Phần tử có vị trí cố định được định vị tương ứng với cửa sổ trình duyệt.

Nó sẽ không di chuyển ngay cả khi cửa sổ được cuộn:

Bình luận: IE7 và IE8 chỉ hỗ trợ giá trị cố định nếu loại tài liệu!DOCTYPE được chỉ định.

Các phần tử cố định được loại bỏ khỏi dòng chảy bình thường. Tài liệu và các phần tử khác hoạt động như thể phần tử cố định không tồn tại.

Các phần tử cố định có thể chồng lên các phần tử khác.

Định vị tương đối

Một phần tử có vị trí tương đối được định vị so với vị trí bình thường của nó.

Các phần tử được định vị tương đối thường được sử dụng làm nơi chứa các phần tử được định vị tuyệt đối.

Định vị tuyệt đối

Phần tử được định vị tuyệt đối được định vị tương ứng với phần tử cha đầu tiên được định vị khác với vị trí tĩnh. Nếu không tìm thấy phần tử nào như vậy thì phần tử cha được coi là :

Các phần tử được định vị tuyệt đối sẽ bị xóa khỏi luồng phần tử tiêu chuẩn. Tài liệu và các phần tử khác hoạt động như thể phần tử được định vị tuyệt đối không tồn tại.

Các phần tử được định vị tuyệt đối có thể chồng lên các phần tử khác.

Các phần tử chồng chéo

Khi các phần tử nằm ngoài luồng tiêu chuẩn, chúng có thể chồng lên các phần tử khác.

Thuộc tính z-index chỉ định thứ tự dọc của một phần tử (phần tử nào sẽ được đặt ở phía trước hoặc phía sau các phần tử khác).

Một phần tử có thể có thứ tự dọc dương hoặc âm:

Phần tử có thứ tự dọc lớn hơn luôn ở phía trước phần tử có thứ tự dọc nhỏ hơn.

Bình luận: Nếu hai phần tử được định vị trùng nhau và không có thứ tự dọc nào được chỉ định thì phần tử nằm sau trong mã HTML sẽ được hiển thị ở trên cùng.

Thêm ví dụ

Thiết lập hình dạng của phần tử
Ví dụ này minh họa cách xác định hình dạng của một phần tử. Phần tử được cắt bớt thành hình dạng này và sau đó được hiển thị.

Cách hiển thị phần tử bị tràn bằng cách cuộn
Ví dụ này minh họa cách đặt thuộc tính tràn để tạo thanh cuộn khi nội dung của phần tử quá lớn để vừa với khu vực được chỉ định.

Cách buộc trình duyệt tự động xử lý tràn
Ví dụ này minh họa cách buộc trình duyệt tự động xử lý lỗi tràn.

Thay đổi con trỏ
Ví dụ này minh họa cách thay đổi con trỏ.

Tất cả thuộc tính định vị CSS

Số trong cột "CSS" cho biết thuộc tính được xác định trong phiên bản CSS nào (CSS1 hoặc CSS2).

Tài sản	Sự miêu tả	Giá trị	CSS

Bạn vẫn còn bối rối về cách định vị tuyệt đối hoạt động trong CSS và đang làm mất đi các thành phần trên màn hình? Chúng ta hãy hiểu phép thuật này.

Giới thiệu về Định vị

Khi bạn đặt vị trí: tuyệt đối, không phải bản thân phần tử xuất hiện mà là vùng chứa chính của nó, bởi vì vị trí trong CSS có liên quan đến nó. Khó khăn là đây không phải lúc nào cũng là phần tử gốc trực tiếp của phần tử.

Chúng ta hãy xem một đoạn mã có bốn div lồng vào nhau giống như một con búp bê lồng vào nhau.

< body >

< div class = "box-1" >

< div class = "box-2" >

< div class = "box-3" >

< div class = "box-4" > < / div >

< / div >

< / body >

Các hộp box-1 , box-2 và box-3 được căn giữa để làm đẹp bằng cách sử dụng các thuộc tính CSS lề: auto và flex. Khối hộp-4 vẫn ở vị trí mặc định trong luồng tài liệu.

nội dung ( display: flex; ) .box-1, .box-2, .box-3 ( display: flex; lề: auto; )

thân hình (

hiển thị: linh hoạt;

Hộp-1,

Hộp-2,

Hộp-3 (

hiển thị: linh hoạt;

Ký quỹ: tự động;

Cả 4 phần tử đều có vị trí mặc định. Hiện tại bố cục trông như thế này:

.box-4 không có định vị

Chúng ta đang định vị chống lại điều gì?

Để định vị chính nó, một phần tử phải biết hai điều:

phụ huynh nào sẽ là điểm khởi đầu;
lượng dịch chuyển so với điểm tham chiếu (trên, dưới, phải hoặc trái).

Nếu bạn xác định vị trí: tuyệt đối cho box-4, phần tử đó sẽ rời khỏi luồng tài liệu bình thường. Nhưng bây giờ nó vẫn ở vị trí cũ vì tọa độ offset không được chỉ định. Nếu chiều rộng của một phần tử không được xác định trong CSS, nó sẽ bằng chiều rộng của nội dung trong đó (cộng với phần đệm và đường viền).

.box-4 với định vị tuyệt đối không có offset

Bây giờ hãy thêm các thuộc tính top: 0 và left: 0 . Phần tử phải xác định vùng chứa chính nào sẽ trở thành điểm tham chiếu cho các tọa độ này. Phần tử gần nhất có vị trí không tĩnh (thường là vị trí: tương đối) sẽ trở thành phần tử đó. box-4 bắt đầu thẩm vấn từng tổ tiên của nó. Cả hộp-3, hộp-2, hộp-1 đều không phù hợp vì chúng có vị trí mặc định trong CSS (không được đặt).

Nếu không tìm thấy tổ tiên được định vị, phần tử sẽ được đặt tương ứng với phần thân của tài liệu:

.box-4 với định vị tuyệt đối. Các phần tử gốc không có vị trí

Nếu bạn đặt vị trí: tương đối với phần tử box-1, nó sẽ trở thành điểm tham chiếu:

.box-4 với định vị tuyệt đối. .box-1 với vị trí tương đối

Một phần tử được định vị tuyệt đối được định vị tương ứng với phần tử tổ tiên được định vị gần nhất của nó.

Khi điểm tham chiếu được tìm thấy, mọi thứ phía trên nó trong cây DOM sẽ không còn quan trọng nữa.

Nếu bạn cũng đặt vị trí: tương đối cho box-2 thì box-4 sẽ được định vị tương đối với nó, vì tổ tiên này gần hơn.

.box-4 với định vị tuyệt đối. .box-2 với vị trí tương đối

Tương tự cho hộp 3:

Hai công cụ chính thường được sử dụng để bố trí trang - định vị Và chuyển động tự do (nổi). Định vị CSS cho phép bạn chỉ định vị trí hộp của phần tử xuất hiện và phần nổi tự do sẽ di chuyển các phần tử sang cạnh trái hoặc phải của hộp chứa, cho phép phần còn lại của nội dung "chảy" xung quanh nó.

Định vị và chuyển động tự do của các phần tử

1. Các kiểu định vị

Thuộc tính vị trí cho phép bạn chỉ định vị trí mới của khối so với vị trí của nó trong luồng tài liệu thông thường. Theo mặc định, tất cả các phần tử được sắp xếp tuần tự lần lượt theo thứ tự chúng được xác định trong cấu trúc của tài liệu HTML. Tài sản không được thừa kế.

chức vụ
Nghĩa:
tĩnh	Giá trị mặc định có nghĩa là không có vị trí. Các phần tử được hiển thị tuần tự lần lượt theo thứ tự chúng được xác định trong tài liệu HTML. Được sử dụng để xóa bất kỳ giá trị định vị nào khác.
liên quan đến	Một phần tử được định vị tương đối được di chuyển từ vị trí bình thường của nó theo các hướng khác nhau so với ranh giới của vùng chứa chính của nó, nhưng không gian mà nó chiếm giữ không biến mất. Tuy nhiên, thành phần như vậy có thể chồng lên nội dung khác trên trang. Nếu đối với một phần tử được định vị tương đối, bạn đặt các thuộc tính trên và dưới hoặc trái và phải cùng một lúc, thì trong trường hợp đầu tiên, chỉ trên cùng mới hoạt động, trong trường hợp thứ hai - bên trái. Định vị tương đối cho phép bạn đặt chỉ mục z cho một phần tử, cũng như định vị tuyệt đối các phần tử con trong một khối.
tuyệt đối	Một phần tử được định vị tuyệt đối sẽ bị xóa hoàn toàn khỏi luồng tài liệu và được định vị so với ranh giới của khối vùng chứa của nó (phần tử khác hoặc cửa sổ trình duyệt). Khối chứa cho phần tử được định vị tuyệt đối là phần tử tổ tiên gần nhất có giá trị thuộc tính vị trí không phải là tĩnh. Vị trí các cạnh của phần tử được xác định bằng cách sử dụng thuộc tính offset. Không gian mà phần tử đó chiếm giữ sẽ sụp đổ như thể phần tử đó không tồn tại trên trang. Một phần tử được định vị tuyệt đối có thể chồng lên nhau hoặc bị chồng lên bởi các phần tử khác (do thuộc tính z-index). Bất kỳ phần tử nào được định vị tuyệt đối đều tạo ra một khối, nghĩa là nó nhận giá trị display: block; .
đã sửa	Sửa một phần tử tại một vị trí được chỉ định trên trang. Khối chứa của một phần tử cố định là khung nhìn, tức là phần tử luôn được cố định so với cửa sổ trình duyệt và không thay đổi vị trí của nó trong khi cuộn trang. Bản thân phần tử này đã bị xóa hoàn toàn khỏi luồng tài liệu chính và được tạo trong luồng tài liệu mới.
ban đầu	Đặt giá trị thuộc tính thành giá trị mặc định.
thừa kế	Kế thừa giá trị thuộc tính từ phần tử cha.

Cơm. 1. Sự khác biệt giữa định vị tĩnh, tương đối và tuyệt đối

2. Thuộc tính offset

Các thuộc tính mô tả phần bù so với cạnh gần nhất của khối container. Đặt cho các phần tử có giá trị thuộc tính vị trí không phải là tĩnh. Họ có thể nhận cả giá trị tích cực và tiêu cực. Không được thừa kế.

Đối với thuộc tính top, các giá trị dương di chuyển cạnh trên của phần tử được định vị bên dưới và các giá trị âm di chuyển cạnh trên của khối chứa nó. Đối với thuộc tính left, các giá trị dương sẽ di chuyển cạnh của phần tử được định vị sang bên phải và các giá trị âm sẽ di chuyển cạnh của phần tử được định vị sang trái. Nghĩa là, các giá trị dương di chuyển phần tử bên trong khối vùng chứa và các giá trị âm di chuyển phần tử ra bên ngoài khối chứa.

3. Định vị trong một phần tử

Đối với khối chứa của một phần tử được định vị tuyệt đối, thuộc tính vị trí: tương đối được đặt mà không có phần bù. Điều này cho phép các phần tử được định vị trong phần tử vùng chứa.

.wrap ( đệm: 10px; chiều cao: 150px; vị trí: tương đối; nền: #e7e6d4; text-align: right; border: 3px nét đứt #645a4e; ) .white ( vị trí: tuyệt đối; chiều rộng: 200px; trên cùng: 10px; trái : 10px; phần đệm: 10px; nền: #ffffff; đường viền: 3px nét đứt #312a22; )

Cơm. 2. Định vị tương đối tuyệt đối

4. Vấn đề về định vị

1. Nếu chiều rộng hoặc chiều cao của một phần tử được định vị tuyệt đối được đặt thành auto thì giá trị của nó sẽ được xác định bởi chiều rộng hoặc chiều cao của nội dung phần tử. Nếu chiều rộng hoặc chiều cao được khai báo rõ ràng thì đây là giá trị sẽ được gán.
2. Nếu bên trong một khối có vị trí: tuyệt đối có các phần tử được đặt float, thì chiều cao của phần tử này sẽ bằng chiều cao của phần tử cao nhất trong số các phần tử này.
3. Đối với một phần tử có vị trí: tuyệt đối hoặc vị trí: cố định, bạn không thể đặt đồng thời thuộc tính float, nhưng đối với một phần tử có vị trí: tương đối, bạn có thể.
4. Nếu tổ tiên của phần tử được định vị là một phần tử khối, thì vùng chứa khối được hình thành bởi vùng nội dung được phân cách bằng đường viền. Nếu tổ tiên là một phần tử nội tuyến, khối chứa được hình thành bởi ranh giới bên ngoài của nội dung của nó. Nếu không có tổ tiên thì khối container là phần tử body.

5. Chuyển động tự do của các yếu tố

Theo thứ tự thông thường, các phần tử khối được hiển thị bắt đầu từ cạnh trên của cửa sổ trình duyệt và hướng về phía dưới cùng. Thuộc tính float cho phép bạn di chuyển bất kỳ phần tử nào, căn chỉnh nó sang cạnh trái hoặc phải của trang web hoặc phần tử chứa nó. Trong trường hợp này, các phần tử khối khác sẽ bỏ qua nó và các phần tử nội tuyến sẽ di chuyển sang phải hoặc trái, giải phóng không gian cho nó và di chuyển xung quanh nó.

Cơm. 3. Chuyển động tự do của các yếu tố

Khối nổi đảm nhận kích thước nội dung của nó, có tính đến phần đệm và đường viền. Lề trên và dưới của phần tử nổi không bị thu gọn. Thuộc tính float áp dụng cho cả phần tử khối và phần tử nội tuyến.

Cạnh ngoài bên trái hoặc bên phải của phần tử được di chuyển, không giống như các phần tử được định vị, không thể được đặt ở bên trái (hoặc bên phải) của cạnh trong của khối chứa nó, tức là. vượt ra ngoài ranh giới của nó. Hơn nữa, nếu phần đệm bên trong được chỉ định cho khối container thì khối nổi sẽ được đặt cách nhau từ cạnh của khối container ở khoảng cách đã chỉ định.

Thuộc tính tự động thay đổi giá trị được tính toán (hiển thị trên trình duyệt) của thuộc tính display thành display: block cho các giá trị sau: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell .table-caption, table-header-group, table-footer-group. Giá trị của bảng nội tuyến thay đổi thành bảng .

Thuộc tính không có tác dụng đối với các phần tử có display: flex và display: inline-flex .

Khi sử dụng thuộc tính float trên các phần tử khối, hãy đảm bảo chỉ định chiều rộng. Điều này sẽ tạo không gian cho các nội dung khác trong trình duyệt. Nhưng nếu chiều rộng tổng hợp của tất cả các cột lớn hơn không gian có sẵn thì phần tử cuối cùng sẽ giảm xuống.

Đồng thời, lề dọc của các phần tử float không bị thu gọn với lề của các phần tử lân cận, không giống như các phần tử khối thông thường.

6. Hủy bỏ dòng xung quanh các phần tử

6.1. tài sản rõ ràng

Thuộc tính clear xác định cách phần tử theo sau phần tử float sẽ được định vị. Thuộc tính hủy phần float trên một hoặc cả hai phía của phần tử được đặt bởi thuộc tính float. Để ngăn nền hoặc đường viền hiển thị dưới các phần tử nổi, hãy sử dụng quy tắc (tràn: ẩn;).

6.2. Làm sạch luồng có kiểu bằng cách sử dụng lớp Clearfix và lớp giả :after

Giả sử bạn có một thùng chứa khối không được chỉ định chiều rộng và chiều cao. Một khối nổi có kích thước xác định được đặt bên trong nó.

.container ( đệm: 20px; nền: #e7e6d4; viền: 3px nét đứt #645a4e; ) .floatbox ( float: left; chiều rộng: 300px; chiều cao: 150px; lề phải: 20px; đệm: 0 20px; nền: #ffffff ; đường viền: nét đứt 3px #666666; )

Cơm. 4. “Hiệu ứng thu gọn” của khối container

Giải pháp cho vấn đề:
Chúng tôi tạo lớp .clearfix và kết hợp với lớp giả :after, áp dụng nó cho khối chứa.

.container ( đệm: 20px; nền: #e7e6d4; viền: 3px nét đứt #645a4e; ) .floatbox ( float: left; chiều rộng: 300px; chiều cao: 150px; lề phải: 20px; đệm: 0 20px; nền: #ffffff ; viền: 3px nét đứt #666666; ) .clearfix:after ( nội dung: ""; hiển thị: khối; chiều cao: 0; xóa: cả hai; khả năng hiển thị: ẩn; )

Tùy chọn thứ hai để xóa luồng:

Clearfix:after ( nội dung: ""; hiển thị: bảng; xóa: cả hai; )
Cơm. 5. Áp dụng phương pháp “làm sạch” khối container chứa phần tử nổi

6.3. Một cách dễ dàng để làm sạch một luồng

Có một thủ thuật khác để làm sạch luồng cho một phần tử chứa các phần tử nổi, chẳng hạn như danh sách có dấu đầu dòng theo chiều ngang:

Ul ( lề: 0; kiểu danh sách: không có; đệm: 20px; nền: #e7e6d4; tràn: tự động; ) li ( float: left; width: calc(100% / 3 - 20px); chiều cao: 50px; lề- phải: 20px; nền: #ffffff; đường viền: 3px nét đứt #666666; ) li:con cuối cùng (lề phải: 0;) Hình. 6. Dọn dẹp luồng danh sách ngang

Phần tử khối trong HTML là phần tử theo mặc định chiếm toàn bộ chiều rộng của phần tử gốc của nó. Phần tử cha có thể là phần tử khối khác hoặc cửa sổ trình duyệt. Bạn có thể đặt chiều rộng và chiều cao của phần tử khối bằng thuộc tính CSS. Các phần tử khối định vị là quá trình định vị chúng trong cửa sổ trình duyệt và liên quan đến chúng bằng cách sử dụng các thuộc tính CSS location , left , top , right và Bottom . Thuộc tính vị trí CSS được thiết kế để đặt một trong bốn loại định vị có sẵn: tĩnh (mặc định), tuyệt đối, cố định và tương đối. Các thuộc tính CSS còn lại, cụ thể là left , top , right và Bottom , được sử dụng để đặt khoảng cách tương ứng với các cạnh trái, trên, phải và dưới của phần tử cha. Ngoài ra, khi thiết lập một số thuộc tính nhất định, các phần tử khối có thể chồng lên nhau và tính năng này cũng có thể được sử dụng trên các trang web.

Định vị mặc định (tĩnh)

Nếu bạn không chỉ định vị trí cho một phần tử khối hoặc chỉ định static , điều này giống nhau thì các phần tử khối sẽ được sắp xếp theo thứ tự. Hơn nữa, khối tiếp theo (ví dụ: màu đỏ) nằm trên một dòng mới. Ngoài ra, vị trí này không bị ảnh hưởng bởi việc đặt khoảng cách left , top , right và Bottom .

Định vị tuyệt đối (absolute)

Với định vị tuyệt đối, vị trí của một phần tử được chỉ định tương ứng với các cạnh của cửa sổ trình duyệt bằng cách sử dụng khoảng cách được chỉ định bởi các thuộc tính left , top , right và Bottom . Nếu bạn chỉ định khoảng cách left và right cùng một lúc và chúng xung đột với nhau thì ưu tiên sẽ được dành cho left , điều tương tự cũng xảy ra với top và Bottom , trong đó khoảng cách top được ưu tiên. Định vị tuyệt đối thường được sử dụng kết hợp với định vị tương đối cho mục đích thiết kế, khi cần đặt các phần tử khác nhau tương đối với nhau; nó cũng có thể được sử dụng để tạo menu thả xuống, bố cục trang web, v.v.

Định vị cố định

Định vị cố định khác với các loại định vị khác và không di chuyển cùng với nội dung khi bạn cuộn trang. Các phần tử khối có vị trí cố định được neo bằng các thuộc tính left , top , right và Bottom vào các cạnh của cửa sổ trình duyệt. Định vị cố định được sử dụng để tạo giao diện khung (cửa sổ trình duyệt được chia thành nhiều khu vực), menu cố định, chân trang cố định và các khối “vĩnh viễn” (danh sách các liên kết, nút xã hội, v.v.).