Nổi và xóa - Thuộc tính CSS cho các phần tử nổi trong bố cục khối. Khái niệm về dòng chảy Đặc điểm của phao

Float là thuộc tính CSS cho các phần tử định vị. Để hiểu mục đích và nguồn gốc của nó, bạn có thể chuyển sang thiết kế in ấn. Trong bố cục in, hình ảnh có thể được định vị trên trang sao cho văn bản "chảy" xung quanh chúng. Điều này thường được gọi là "gói văn bản".

Trong các chương trình bố cục trang, các phần tử có văn bản có thể tính đến hình ảnh cũng như bỏ qua chúng. Nếu chúng bị bỏ qua, văn bản sẽ xuất hiện phía trên hình ảnh như thể chúng không có ở đó. Đây là điểm khác biệt chính giữa việc hình ảnh có phải là một phần của luồng chính của trang hay không. Thiết kế web rất giống nhau.

Trong thiết kế web, các thành phần trang có bộ thuộc tính float hoạt động giống hệt như hình ảnh được in khi văn bản "chảy" xung quanh chúng. Những phần tử như vậy là một phần của luồng chính của trang web. Tuy nhiên, mọi thứ sẽ khác nếu các phần tử sử dụng định vị tuyệt đối. Các phần tử được định vị tuyệt đối sẽ bị xóa khỏi luồng chính của trang, tương tự như ví dụ ở trên khi in văn bản sẽ bỏ qua hình ảnh. Các phần tử như vậy không ảnh hưởng đến vị trí của các phần tử khác dù chúng có chạm vào nhau hay không.

Đặt thuộc tính float hoạt động như thế này:

#sidebar ( float: right; )

Có tổng cộng 4 giá trị cho thuộc tính float. Trái và phải được sử dụng cho các hướng tương ứng. Không có (mặc định) - đảm bảo rằng phần tử sẽ không nổi. Và kế thừa, cho biết hành vi phải giống với phần tử gốc.

Phao có thể được sử dụng để làm gì?

Ngoài việc bao bọc văn bản xung quanh hình ảnh, float có thể được sử dụng để tạo bố cục của toàn bộ trang web.

Thuộc tính float cũng hữu ích ở quy mô nhỏ hơn. Ví dụ: hãy xem xét một khu vực nhỏ trên trang web. Giả sử bạn sử dụng float cho hình đại diện của mình, khi bạn thay đổi kích thước hình ảnh, kích thước văn bản sẽ được điều chỉnh để phù hợp với hình ảnh.

Sự sắp xếp tương tự của các đối tượng có thể đạt được bằng cách sử dụng định vị. Đối tượng chứa được gán vị trí tương đối và đối tượng hình ảnh được gán vị trí tuyệt đối. Trong trường hợp này, hình đại diện sẽ không ảnh hưởng đến vị trí của văn bản.

Vô hiệu hóa thuộc tính float

Đối với float, thuộc tính liên quan là rõ ràng. Bất kỳ phần tử nào có tập thuộc tính clear sẽ không được nổi lên trên cùng như mong đợi mà sẽ xuất hiện bên dưới các phần tử float. Có lẽ một ví dụ bằng hình ảnh sẽ giải thích rõ hơn lời nói.

Trong ví dụ, thanh bên được di chuyển sang bên phải (float: right;) và chiều cao của nó nhỏ hơn vùng nội dung chính. Vì vậy, footer sẽ được nâng lên cao hơn vì nó có đủ chiều cao và hành vi float đòi hỏi điều đó. Để khắc phục tình trạng này, nó cần đặt thuộc tính clear để đảm bảo phần tử được hiển thị bên dưới phần tử float.

#footer ( xóa: cả hai; )

Thuộc tính rõ ràng có thể có bốn giá trị. Cả hai, được sử dụng phổ biến nhất, được sử dụng để hủy bỏ sự trôi nổi của mỗi hướng. Trái và Phải - được sử dụng để hủy chuyển động của một trong các hướng. Không có - mặc định, thường không được sử dụng trừ khi cần rõ ràng. kế thừa sẽ là giá trị thứ năm, nhưng điều kỳ lạ là nó không được hỗ trợ trong Internet Explorer. Việc hủy chỉ một float trái hoặc phải ít phổ biến hơn nhiều, nhưng chắc chắn có mục đích của nó.

Sự sụp đổ lớn

Một điều tuyệt vời khác về thuộc tính float là việc sử dụng nó có thể ảnh hưởng đến phần tử cha. Nếu một phần tử như vậy chỉ chứa các phần tử float, thì nó sẽ sụp đổ theo đúng nghĩa đen, tức là chiều cao của nó bằng 0. Điều này không phải lúc nào cũng đáng chú ý trừ khi phần tử gốc có một loại nền hiển thị nào đó.

Sự sụp đổ này có vẻ phi logic, nhưng phương án thay thế thậm chí còn tồi tệ hơn. Hãy xem xét ví dụ này:

Nếu phần tử khối ở trên cùng tự động mở rộng để chứa tất cả các phần tử float, chúng ta sẽ tạo ra một khoảng cách không tự nhiên trong văn bản giữa các đoạn văn mà không có cách nào khắc phục được. Nếu đúng như vậy, các nhà thiết kế của chúng tôi sẽ phàn nàn về hành vi này thường xuyên hơn là về sự sụp đổ.

Vì vậy, việc thu gọn hầu như luôn luôn cần thiết để ngăn ngừa những khó khăn về bố cục. Để thay đổi hành vi này, bạn cần thêm phần tử hủy float sau phần tử float, nhưng trước khi đóng phần tử cha.

Các cách hủy thả nổi

Nếu bạn biết rằng sau phần tử float, một số phần tử khác (ví dụ: footer) sẽ luôn được hiển thị, thì bạn chỉ cần đặt thuộc tính clear:both; , như trong ví dụ trên và tiếp tục làm việc của riêng bạn. Điều này lý tưởng vì nó không yêu cầu bất kỳ hack hoặc yếu tố bổ sung nào. Tất nhiên, không phải mọi thứ trong cuộc sống của chúng ta đều suôn sẻ như vậy và có những lúc phương pháp này là chưa đủ. Vì vậy, cần phải có thêm một số phương pháp trong kho vũ khí của mình.

• Phương thức div trống. Một div trống theo nghĩa đen được sử dụng.
  . Đôi khi một phần tử có thể được sử dụng ở vị trí của nó
  hoặc bất cứ điều gì, nhưng div được sử dụng thường xuyên nhất vì theo mặc định, nó không có kiểu dáng, không có mục đích đặc biệt và khó có thể áp dụng kiểu chung cho nó thông qua CSS. Những người hâm mộ đánh dấu thuần túy về mặt ngữ nghĩa có thể không thích phương pháp này, vì sự hiện diện của một div trống không có ý nghĩa ngữ cảnh và được đặt trên trang chỉ vì lý do thiết kế. Tất nhiên, nói đúng ra thì họ đúng, nhưng anh ấy đang làm công việc của mình và không làm hại ai.
• Phương pháp tràn. Dựa trên thực tế là phần tử cha cần đặt thuộc tính tràn. Nếu thuộc tính này được đặt thành tự động hoặc ẩn, phần tử cha sẽ mở rộng để chứa tất cả các phần tử float. Phương pháp này có vẻ chính xác hơn về mặt ngữ nghĩa vì nó không yêu cầu các phần tử bổ sung. Tuy nhiên, nếu bạn sử dụng một div khác chỉ để sử dụng phương pháp này (có nghĩa là div gốc), thì nó sẽ giống như ví dụ trước khi thêm một div trống. Ngoài ra, hãy nhớ rằng thuộc tính tràn có mục đích khác. Hãy cẩn thận và đừng để một số nội dung của bạn biến mất hoặc xuất hiện các thanh cuộn không cần thiết.
• Phương pháp làm sạch đơn giản. Phương pháp này sử dụng bộ chọn giả CSS tuyệt vời :after. Tốt hơn nhiều so với việc sử dụng tràn trên phần tử gốc. Bạn chỉ cần cung cấp cho nó một lớp bổ sung, được khai báo như sau: .clearfix:after ( content: "."; khả năng hiển thị: ẩn; hiển thị: khối; chiều cao: 0; clear: cả hai; ) Phương thức này thêm nội dung vô hình và hủy bỏ phần nổi Và nhân tiện, đây không phải là toàn bộ câu chuyện về cách sử dụng mã bổ sung trong các trình duyệt cũ hơn.

Và, như bạn hiểu, mỗi phương pháp được sử dụng trong các tình huống khác nhau. Ví dụ: hãy lấy một lưới gồm các phần tử khối thuộc các loại khác nhau.

Để trình bày trực quan tốt hơn, sẽ rất tốt nếu kết hợp các khối tương tự. Ví dụ: chúng tôi muốn mỗi loại bắt đầu trên một dòng mới, trong trường hợp của chúng tôi, loại phần tử được xác định bằng màu sắc. Chúng ta có thể sử dụng phương pháp tràn hoặc "phương pháp xóa đơn giản" nếu mỗi nhóm có phần tử vùng chứa riêng. Hoặc chúng ta có thể sử dụng phương thức div trống giữa mỗi nhóm. Ba phần tử vùng chứa hoặc ba div trống, tùy thuộc vào bạn để lựa chọn tùy chọn nào phù hợp hơn cho nhiệm vụ của bạn.

Vấn đề với phao

Mọi người thường cố gắng bỏ qua Floats vì chúng cần được xử lý rất cẩn thận. Hầu hết các lỗi xảy ra với IE6. Khi ngày càng nhiều nhà thiết kế web ngừng hỗ trợ IE6, bạn có thể không quan tâm đến những vấn đề này. Nhưng đối với những người quan tâm, đây là một danh sách ngắn.

Các lựa chọn thay thế để nổi

Nếu bạn cần văn bản để bao quanh một bức ảnh thì không có lựa chọn thay thế nào. Nhưng đối với bố cục trang, chắc chắn có nhiều lựa chọn. Có một số cách tiếp cận rất thú vị kết hợp tính linh hoạt của float với sức mạnh của việc định vị tuyệt đối. CSS3 có một thứ gọi là Mô-đun bố cục mẫu, sẽ cung cấp một giải pháp thay thế xứng đáng cho việc thả nổi trong tương lai.

Hãy xem điều gì xảy ra với các phần tử khi thuộc tính float được áp dụng cho chúng:

• Phần tử “nổi” và được ép vào cạnh trái (nếu float: left) hoặc cạnh phải (float: right) của phần tử cha hoặc phần tử cũng được đặt thành float
• Nếu một phần tử không thể vừa một hàng với phần tử khác do chiều rộng của khối cha, nó sẽ được di chuyển xuống cho đến khi có đủ khoảng trống cho nó
• Các phần tử khối khác không được chỉ định float hoạt động như thể phần tử có float không có trên trang (phần tử đã nổi). Các dòng “biết” rằng phần tử đã nổi và quấn quanh nó
• Độ rộng của khối được đặt thành float được xác định bởi nội dung.

Hãy xem một ví dụ. Bỏ ghi chú thuộc tính float: left bên trong CSS. Nhìn vào kết quả.

Thay thế float:left bằng float:right.

Thuộc tính float rất hữu ích trong việc cho phép văn bản bao quanh hình ảnh. Hãy xem xét một ví dụ:

Thêm nhận xét vào thuộc tính float: left trong tệp CSS. Xem bố cục trang sẽ thay đổi như thế nào. Thay thế float: left bằng float: right.

“Thu gọn” phần tử cha khi phần tử “con” bật lên

Đặt phần tử hai bên trong phần tử một. Theo mặc định, chiều cao sẽ trải dài trên toàn bộ nội dung. Ngay khi chúng ta áp dụng thuộc tính float cho hai phần tử, nó sẽ nổi và phần tử cha sẽ không biết rằng hai phần tử tồn tại. Nếu hai không có nội dung thì chiều cao của nó bằng 0. Hành vi này được gọi là "sụp đổ". Để ngăn khối cha mẹ bị thu gọn, thuộc tính chiều cao tối thiểu được cấp cho nó - chiều cao tối thiểu hoặc một phương thức được sử dụng: một khối khác được thêm vào, thuộc tính được đặt:

1

Khối này không hiển thị trên trang, nhưng thuộc tính clear:both loại bỏ phần bao bọc của các phần tử và kéo dài phần tử gốc theo chiều cao của nội dung.

Bỏ ghi chú thuộc tính float:left trong CSS. Hãy xem phần tử cha hoạt động như thế nào:

Hãy xem xét một ví dụ sử dụng rõ ràng: cả hai

Như vậy bạn đã làm quen với các tính chất cơ bản của float. Hãy áp dụng kiến ​​thức của chúng ta vào thực tế.

Hành hình

Bài tập 1. Thêm lớp vào hình ảnh. Trong các lớp, chỉ định thuộc tính float:left. Nghiên cứu xem đầu ra của trang sẽ thay đổi như thế nào.

Định dạng bảng xếp tầng). Ngôn ngữ này đã tồn tại từ năm 1996 và vẫn đang phát triển. Hiện tại, các nhà phát triển đã sử dụng phiên bản CSS thứ ba. Sử dụng ngôn ngữ lập trình CSS, có thể tạo ra một trang web hoàn toàn đẹp và dễ chịu, không có vẻ lỗi thời hoặc gây bất tiện cho người dùng, ngay cả khi bạn hoàn toàn không sử dụng JavaScript. Khả năng hiện đại của phiên bản thứ ba cho phép bạn làm điều này.

Các nhà phát triển cũng có thể sử dụng các tùy chọn định dạng thuận tiện hơn, chẳng hạn như Flexbox hoặc Vị trí để thay đổi vị trí của một thành phần trên trang web, nhưng điều đầu tiên phải làm trước tiên. Trước tiên, bạn nên hiểu những ưu điểm và nhược điểm của thuộc tính Float.

CSS Float - tại sao cần thiết?

Float là một thuộc tính cho các phần tử định vị. Hàng ngày người ta có thể nhìn thấy nó trên các trang báo và tạp chí, nhìn vào những hình ảnh và dòng chữ chảy rất gọn gàng xung quanh chúng. Trong thế giới mã HTML và CSS, điều tương tự cũng sẽ xảy ra khi sử dụng hàm Float. Nhưng cần nhớ rằng chỉnh sửa hình ảnh không phải lúc nào cũng là mục đích chính của chức năng này. Nó có thể được sử dụng để tạo ra sự sắp xếp phổ biến các thành phần trang web thành hai, ba, bốn cột. Trên thực tế, thuộc tính CSS Float áp dụng cho hầu hết mọi phần tử html. Biết những điều cơ bản về chỉnh sửa sắp xếp các thành phần bằng chức năng Float rồi đến Thuộc tính, việc tạo bất kỳ thiết kế trang web nào sẽ không khó.

Các chương trình đặc biệt của các nhà thiết kế bố cục đôi khi không thể nhận thấy hình ảnh mà sẽ lấn át chúng. Những điều tương tự cũng xảy ra trong thiết kế web, chỉ tính đến việc văn bản, thay vì leo lên hình ảnh, sẽ được hiển thị (nếu thuộc tính Float được sử dụng không chính xác) bên cạnh hoặc bên dưới nó, nhưng luôn không ở nơi mà nhà phát triển cần.

Mô tả thuộc tính CSS Float

Trên thực tế, biết cách sử dụng thuộc tính Float là một điều rất tốt cho bất kỳ nhà thiết kế web nào. Tuy nhiên, thật không may, việc thiếu hiểu biết về cách thức hoạt động của chức năng này có thể dẫn đến sự xung đột giữa các thành phần của trang web và những sự thất vọng tương tự khác. Trước đây, tình huống tương tự cũng từng xảy ra do lỗi trình duyệt. Bây giờ bí mật về cách sử dụng đúng thuộc tính Float sẽ được tiết lộ và sẽ không còn vấn đề gì phát sinh nữa.

Thuộc tính Float có bốn giá trị:

• Phao: kế thừa;
• Nổi: đúng;
• nổi:trái;
• Phao: không có;

Đối với những người biết tiếng Anh, các giá trị của tham số thuộc tính Float phải rõ ràng. Nhưng đối với những người không biết, đây là một lời giải thích nhỏ. Tham số :bên trái; Di chuyển phần thân của phần tử tới góc ngoài cùng bên trái của phần tử cha. Điều tương tự cũng xảy ra (chỉ theo hướng khác) với tham số bcgjkmpjdfybb :Phải;. Nghĩa :thừa kế; yêu cầu phần tử đảm nhận các cài đặt giống như phần tử gốc của nó. Các phần tử như vậy còn được gọi là phần tử con vì chúng nằm ngay bên trong phần tử cha trong mã html. Một tài sản :không có; cho phép phần tử không làm gián đoạn luồng thông thường của tài liệu, nó được đặt theo mặc định cho tất cả các phần của mã.

Phao hoạt động như thế nào?

Thuộc tính Float CSS hoạt động khá đơn giản. Mọi thứ được mô tả ở trên đều có thể được thực hiện mà không gặp nhiều khó khăn. Sau đó mọi thứ sẽ đơn giản như vậy. Nhưng trước khi chúng ta tiếp tục nghiên cứu tính chất Float, cần phải hiểu một chút lý thuyết. Mỗi phần tử của một trang web là một khối. Bạn có thể dễ dàng xác minh điều này bằng cách mở bảng điều khiển trong Google Chrome bằng cách nhấn Ctrl + Shift + J. Văn bản, tiêu đề, hình ảnh, liên kết và tất cả các thành phần khác của trang web sẽ được hiển thị theo khối, chỉ ở các kích thước khác nhau. Ban đầu, tất cả các khối này nối tiếp nhau. Như bạn có thể thấy trong ví dụ bên dưới, các dòng mã nối tiếp nhau nên chúng sẽ được hiển thị nghiêm ngặt lần lượt.

Điều này được gọi là dòng chảy bình thường. Với luồng này, tất cả các khối nằm chồng lên nhau (không giao nhau với các phần tử) theo chiều dọc. Ban đầu, tất cả nội dung của một trang web đều được đặt theo cách này. Nhưng khi sử dụng, chẳng hạn như thuộc tính ngôn ngữ CSS Float Left, phần tử sẽ rời khỏi vị trí tự nhiên của nó trên trang và được thả nổi về phía bên trái. Hành vi này chắc chắn sẽ dẫn đến xung đột với những phần tử vẫn ở trong dòng chảy bình thường.

Nói cách khác, các phần tử thay vì được sắp xếp theo chiều dọc thì giờ đây nằm cạnh nhau. Nếu phần tử cha có đủ không gian để có thể chứa hai phần tử con bên trong thì xung đột sẽ không xảy ra, nhưng nếu không thì sự chồng chéo của đối tượng này với đối tượng khác là không thể tránh khỏi. Điều cực kỳ quan trọng cần nhớ là hiểu cách hoạt động của thuộc tính CSS Float.

Chức năng rõ ràng để giải quyết vấn đề

Hàm Float có một người bạn thân thiết - Clear. Cùng nhau - Cả hai chức năng này bổ sung cho nhau và làm cho nhà phát triển hài lòng. Như đã nêu ở trên, các phần tử liền kề thoát ra khỏi luồng thông thường của chúng và cũng bắt đầu "nổi", giống như một phần tử được áp dụng thuộc tính Float cho nó (ví dụ: CSS Float Top). Kết quả là, thay vì một phần tử nổi, bạn nhận được hai phần tử và hoàn toàn không nằm ở vị trí mà nhà phát triển dự định đặt chúng. Từ thời điểm này mọi vấn đề bắt đầu.

Hàm Clear có năm giá trị:

• :bên trái;
• :Phải;
• :cả hai;
• :thừa kế;
• không có;

Bằng cách tương tự, bạn có thể hiểu khi nào nên sử dụng chức năng Clear là tốt nhất. Nếu chúng ta có một dòng trong mã Nổi: đúng;(có nghĩa là mã CSS), thì hàm sẽ là Rõ ràng: đúng;. Điều tương tự cũng áp dụng cho tài sản nổi:trái; sẽ bổ sung cho nó Xóa: trái;. Khi viết mã Rõ ràng: cả hai; Hóa ra phần tử được áp dụng hàm này sẽ nằm bên dưới các phần tử được áp dụng hàm Float. Kế thừa nhận các cài đặt từ phần tử gốc và không có cài đặt nào không thực hiện bất kỳ thay đổi nào đối với cấu trúc trang web. Bằng cách hiểu cách hoạt động của các hàm Float và Clear, bạn có thể viết mã HTML và CSS Float độc đáo và khác thường giúp trang web của bạn trở nên độc đáo.

Sử dụng Float để tạo cột

Thuộc tính Float đặc biệt hữu ích khi tạo cột trên trang web (hoặc căn giữa nội dung CSS Float trên trang web). Mã này là thiết thực và tiện lợi nhất, vì vậy cần xem xét một số tùy chọn để tạo mẫu trang web quen thuộc bao gồm hai cột. Ví dụ: hãy lấy một trang web tiêu chuẩn có nội dung ở bên trái, thanh điều hướng ở bên phải, đầu trang và chân trang. Mã sẽ như thế này:

Bây giờ chúng ta cần tìm hiểu những gì được viết ở đây. Phần tử cha chứa phần chính của mã html được gọi là vùng chứa. Nó cho phép bạn ngăn các phần tử được áp dụng chức năng Float phân tán theo các hướng khác nhau. Nếu nó không có ở đó, thì những phần tử này sẽ trôi nổi đến tận viền của trình duyệt.

Sau đó, trong mã có #content và #navigation. Hàm Float được áp dụng cho các phần tử này. #nội dung ở bên trái và #navigation ở bên phải. Điều này là cần thiết để tạo một trang web hai cột. Cần xác định rõ chiều rộng để các đối tượng không chồng lên nhau. Chiều rộng cũng có thể được chỉ định dưới dạng phần trăm. Điều này thậm chí còn thuận tiện hơn so với pixel. Ví dụ: 45% cho #nội dung và 45% cho #navigation và dành 10% còn lại cho thuộc tính lề.

Thuộc tính Clear, nằm trong #footer, ngăn không cho chân trang đi theo #navigation và #content, nhưng vẫn để nó ở cùng một vị trí. Điều gì có thể xảy ra? nếu bạn không chỉ định thuộc tính Clear? Trong mã này, #footer sẽ đơn giản đi lên và kết thúc dưới #navigation. Điều này sẽ xảy ra vì #navigation có đủ không gian để chứa thêm một phần tử. Ví dụ trực quan này cho thấy rõ ràng các thuộc tính Clear và Float bổ sung cho nhau như thế nào.

Những rắc rối bạn có thể gặp phải khi viết code

Các ví dụ trên khá đơn giản. Nhưng vấn đề cũng có thể nảy sinh với họ. Nhìn chung, trên thực tế, rất nhiều rắc rối không mong muốn có thể xảy ra với hàm Float. Cho dù có kỳ lạ đến đâu, các vấn đề thường phát sinh không phải với CSS mà với mã html. Vị trí của phần tử có chức năng Float trong mã html ảnh hưởng trực tiếp đến hoạt động của phần tử sau. Để tránh các loại khó khăn khác nhau, tốt nhất bạn nên tuân thủ một quy tắc đơn giản - đặt các phần tử có chức năng Float đầu tiên trong mã. Điều này hầu như luôn có tác dụng và giảm thiểu hành vi không mong muốn của chúng.

Sự va chạm của các yếu tố

Xung đột xảy ra khi một phần tử cha chứa nhiều phần tử con không thể chứa tất cả chúng và chúng chồng lên nhau. Thậm chí có trường hợp các phần tử có thể không được hiển thị mà biến mất khỏi trang web. Đây không phải là lỗi trình duyệt mà là hành vi khá mong đợi và đúng đắn của các phần tử có chức năng Float.

Vì các phần tử này ban đầu ở trạng thái bình thường và sau đó bị gián đoạn bởi thuộc tính Float nên trình duyệt có thể xóa chúng khỏi trang web. Tuy nhiên, đừng tuyệt vọng, vì giải pháp rất đơn giản và rõ ràng - hãy sử dụng thuộc tính Cear. Có thể trong số các cách giải quyết vấn đề này thì sử dụng Clear là hiệu quả nhất.

Nhưng vấn đề xung đột giữa các thành phần của trang web có thể được giải quyết theo cách khác. Có ít nhất hai cách nữa:

• sử dụng chức năng Vị trí;
• sử dụng Flexbox.

Chức năng Vị trí đôi khi là một sự thay thế tốt cho CSS Float. Khi sử dụng Vị trí, tốt nhất bạn nên đặt hình ảnh ở giữa trang web. Nếu bạn áp dụng chính xác các giá trị: tuyệt đối và: tương đối, các phần tử sẽ rơi vào đúng vị trí và không chồng chéo lên nhau.

Phân tích mã chức năng Vị trí và Float

Bạn nên xem xét kỹ hơn cách thay thế Float bằng Vị trí trong mã HTML và CSS. Nó thực sự rất đơn giản. Giả sử có phần tử #container và #div.

Trong ví dụ này, việc sử dụng hàm Float (CSS Div) trong vùng chứa thứ hai sẽ giúp tạo trang web hai cột tiêu chuẩn. Đừng bao giờ quên chức năng Clear. Không có nó, bạn sẽ chỉ nhận được các phần tử chồng lên nhau.

Vậy làm cách nào để thay đổi mã CSS và Float để sử dụng Postion? Rất đơn giản:

vị trí: tương đối;

vị trí: tương đối;

Trong trường hợp này, #container và #div sẽ đảm nhận vị trí mà nhà phát triển cần trong phần tử gốc. Chủ yếu? đặt #div và #container trong một phần tử gốc phù hợp với kích thước của chúng.

Flexbox - tính năng này sẽ giúp thay thế CSS Float như thế nào?

Flexbox là cách tạo trang web tiên tiến nhất hiện nay nên tính năng này không được các phiên bản trình duyệt cũ hỗ trợ. Không nên bỏ qua thực tế này vì người dùng có phiên bản trình duyệt lỗi thời sẽ không thể xem phiên bản chính xác của trang web.

Flexbox không phải là một thuộc tính mà là một mô-đun riêng biệt. Do đó, flexbox hỗ trợ một số thuộc tính chỉ hoạt động với nó. Ngoài ra, chức năng hiển thị, có ba tham số inline, block và inline-block trong flexbox, chỉ còn lại một flex-flow.

Flexbox hoạt động như thế nào?

Công nghệ này sẽ giúp nhà phát triển dễ dàng căn chỉnh các phần tử theo chiều ngang và chiều dọc. Flexbox cũng có thể thay đổi hướng và thứ tự hiển thị các phần tử. Công nghệ này có hai trục: Trục chính và Trục chéo, xung quanh đó toàn bộ Flexbox được xây dựng. Nó cũng loại bỏ tác dụng của chức năng Float và Clear. Nó xây dựng hệ thống của mình bằng mã, trong đó nó sử dụng các thuộc tính duy nhất cho nó, vì vậy, thật không may, sẽ không thể sao chép các thuộc tính khác, chẳng hạn như Float và Vị trí, trong các phần tử. Và điều này sẽ rất hữu ích, vì như đã đề cập ở trên, Flexbox chỉ hoạt động trong các phiên bản trình duyệt mới.

Điều đáng ghi nhớ là cuối cùng, Vị trí, Flexbox và Float đều làm điều tương tự - tạo ra một thiết kế độc đáo và khác thường cho trang web của bạn. Mỗi lựa chọn được thảo luận trong bài viết thực hiện điều này theo cách riêng của nó và do đó có cả ưu điểm và nhược điểm. Ngoài ra, có thể xảy ra trường hợp chức năng Float hoàn hảo ở đâu đó (ví dụ: trong một trang web có cấu trúc đơn giản), nhưng ở đâu đó tốt hơn nên sử dụng Vị trí hoặc Flexbox.

Lỗi ký quỹ kép

Tuy nhiên, thật không may, đôi khi, mọi nhà phát triển đều gặp phải vấn đề không liên quan đến mã viết mà liên quan đến lỗi trong một loại trình duyệt cụ thể. Ví dụ: có một lỗi trong Internet Explorer được gọi là Lỗi ký quỹ kép. Nó nhân tham số Margin lên hai, dẫn đến việc dịch chuyển các thành phần trang web ra ngoài ranh giới của trình duyệt. Để tránh điều này, chỉ cần chỉ định tham số Margin dưới dạng phần trăm. Thông thường lỗi này xảy ra khi giá trị của thuộc tính Margin và Float khớp nhau.

lề trái: 10px;

Mã này sẽ di chuyển phần tử trong Internet Explorer 20 px sang trái. Bạn có thể thay đổi mã như thế này:

lề trái: 10%;

hoặc là,

lề phải: 10px;

Cả hai lựa chọn này sẽ giải quyết được vấn đề dịch chuyển phần tử.

Lỗi trình duyệt và hiển thị trang web không chính xác

Điều đáng ghi nhớ là Internet Explorer không phải là trình duyệt duy nhất có thể xảy ra lỗi. Các phiên bản cũ hơn của Google Chrome và Mozilla cũng hiển thị không chính xác một số thành phần của trang web hiện đại. Đối với mỗi lỗi này, có thể tìm ra giải pháp. Nói chung, tôi muốn lưu ý rằng việc sử dụng Float sẽ tạo ra một thiết kế trang web độc đáo và hấp dẫn. Hiểu những điều cơ bản và nguyên tắc hoạt động của thuộc tính này sẽ giúp bạn tránh được những sai lầm và giúp mọi nhà phát triển dễ dàng hơn trong cuộc sống.

Tất cả các phần tử xuất hiện trên trang HTML không gì khác hơn là hình chữ nhật. Và về cơ bản chỉ có hai loại:

1. khối (blok), chiếm toàn bộ chiều rộng của chúng và được tách biệt khỏi phần bên trên và bên dưới chúng. Ví dụ: đây là các thẻ DIV, P, H.
2. tích hợp (nội tuyến). Ví dụ: SPAN, MẠNH, EM, A và IMG.

những cái bàn.

Vai trò của thuộc tính tăng lên sau khi chuyển từ bố cục bảng sang bố cục div. Điều này là do float cho phép nhà phát triển web bao gồm các cột mà không cần phải dùng đến bảng. Nó có thể nhận các giá trị Phải, bên trái, nhưng không trung tâm.

Sử dụng thuộc tính display: block; hoặc hiển thị: nội tuyến; chúng tôi đang chuyển đổi một loại hình chữ nhật sang loại khác. Ví dụ: danh sách UL có một số khối LI có thể được sắp xếp theo chiều ngang:

• ĐOẠN VĂN
• ĐOẠN VĂN
• ĐOẠN VĂN

• ĐOẠN VĂN
• ĐOẠN VĂN
• ĐOẠN VĂN

Khi sử dụng thuộc tính float, hình chữ nhật có dạng khối nhưng có điểm đặc biệt: chiều rộng của nó sẽ không mở rộng ra toàn bộ nội dung. Ví dụ: tiêu đề h3 trông như sau:

đây là TIÊU ĐỀ h3

Nếu chúng ta đặt thuộc tính display: inline;, chúng ta sẽ thấy rằng không chỉ chiều rộng đã thay đổi mà cả khoảng cách trên và dưới phần tử:

đây là TIÊU ĐỀ h3

Nhưng nếu tôi muốn đặt phần tử ở bên phải và thêm text-align:right; lần này, thì chúng ta sẽ nhận được:

đây là TIÊU ĐỀ h3

Và nó hoàn toàn khác nếu float: right;. Xin lưu ý rằng khoảng cách trên và dưới phần tử không thay đổi:

đây là TIÊU ĐỀ h3

Các phần tử bên cạnh tiêu đề sẽ hoạt động như thế nào?

Văn bản trên cùng không thay đổi vì phần tử nổi không thể được đặt phía trên dòng mà nó được tạo.

đây là TIÊU ĐỀ h3

Nhưng văn bản màu đỏ nằm dưới tiêu đề và nó sẽ bao quanh tiêu đề mà không có bất kỳ kiểu bổ sung nào. Và chỉ khắc phục được chiều cao của h3, trang sẽ trở về trật tự tự nhiên.

A B C D Một số phần tử nổi sẽ tuân theo trình tự vị trí của chúng.

MỘTBTRONGG chữ...

Và việc căn chỉnh được thực hiện dọc theo cạnh dưới cùng của các chữ cái ở cùng một phía.

A B C D Nếu chúng ta đi bộ sao cho dòng chảy xung quanh phần tử dừng lại tại một thời điểm nhất định (từ đây), thuộc tính rõ ràng được áp dụng. Chúng ta có thể thêm nó vào một thẻ trống

Để đặt đồng đều một số khối hình chữ nhật, chúng ta cho chúng có cùng chiều rộng.

Khoảng cách giữa các khối là ở đâu? Nếu bạn đặt , thì do các phần tử nổi không đủ chỗ nên chúng sẽ di chuyển xuống dưới.
Sự cố được giải quyết bằng cách thêm một DIV khác:

Bố cục dạng bảng rất tiện lợi và dễ hiểu, đó có lẽ là lý do tại sao màn hình tương tự: bảng; xuất hiện. Hình thức tương tự thu được với ít mã hơn.

, trong đó border-spacing chỉ định khoảng cách ngang và dọc giữa các viền ô.

Bây giờ bạn có thể thấy thư viện hình ảnh được xây dựng như thế nào. Tôi hy vọng không ai quên.

Liên kết đến các nguồn:

Xác định phần tử sẽ được căn chỉnh về phía nào, với các phần tử khác chạy xung quanh nó ở các phía khác. Khi thuộc tính float được đặt thành none, phần tử được hiển thị trên trang như bình thường, nhưng được phép một dòng văn bản gói có thể nằm trên cùng một dòng với chính phần tử đó.

thông tin ngắn gọn

Chỉ định

	Sự miêu tả	Ví dụ
<тип>	Cho biết loại giá trị.	<размер>
A && B	Các giá trị phải được xuất ra theo thứ tự được chỉ định.	<размер> && <цвет>
A | B	Cho biết rằng bạn chỉ cần chọn một giá trị trong số các giá trị được đề xuất (A hoặc B).	bình thường | vốn hóa nhỏ
Một || B	Mỗi giá trị có thể được sử dụng độc lập hoặc cùng với các giá trị khác theo bất kỳ thứ tự nào.	chiều rộng || đếm
	Các giá trị nhóm	[ cắt || đi qua ]
*	Lặp lại 0 hoặc nhiều lần.	[,<время>]*
+	Lặp lại một hoặc nhiều lần.	<число>+
?	Loại, từ hoặc nhóm được chỉ định là tùy chọn.	chèn vào?
(A, B)	Lặp lại ít nhất A, nhưng không quá B lần.	<радиус>{1,4}
#	Lặp lại một hoặc nhiều lần cách nhau bằng dấu phẩy.	<время>#

×

Giá trị

left Căn chỉnh phần tử về bên trái và tất cả các phần tử khác, chẳng hạn như văn bản, sẽ bao quanh phần tử đó về bên phải. right Căn chỉnh phần tử về bên phải, với tất cả các phần tử khác bao quanh nó về bên trái. không có Gói phần tử nào không được chỉ định.

Hộp cát

Winnie the Pooh luôn không ác cảm với việc giải khát một chút, đặc biệt là vào lúc 11 giờ sáng, vì lúc đó bữa sáng đã kết thúc từ lâu và bữa trưa vẫn chưa bắt đầu. Và tất nhiên, chú thỏ vô cùng vui mừng khi thấy Thỏ đang lấy cốc và đĩa ra.

img ( float: không có ; )

Ví dụ

Chủ nghĩa hành vi, cho dù nó có vẻ nghịch lý đến đâu, cũng làm sáng tỏ sự kích thích thăng hoa; chẳng hạn, Richard Bandler đã sử dụng sự thay đổi trong các mô thức phụ để xây dựng các trạng thái hiệu quả.

Kết quả của ví dụ này được hiển thị trong Hình. 1.

Cơm. 1. Sử dụng thuộc tính float

Mô hình đối tượng

Một đối tượng.style.cssFloat

Ghi chú

Trong Internet Explorer 6, có sự cố khi tăng gấp đôi giá trị đệm bên trái hoặc bên phải cho các phần tử nổi được lồng trong các phần tử cha. Biên độ liền kề với phía cha mẹ được nhân đôi. Vấn đề thường được giải quyết bằng cách thêm display: inline vào phần tử nổi. Trình duyệt này cũng thêm phần đệm 3px (còn gọi là “lỗi ba pixel”) theo hướng được chỉ định bởi giá trị float.

Sự chỉ rõ

Mỗi thông số kỹ thuật đều trải qua nhiều giai đoạn phê duyệt.

• Khuyến nghị - Thông số kỹ thuật đã được W3C phê duyệt và được khuyến nghị làm tiêu chuẩn.
• Đề xuất ứng viên ( Khuyến nghị có thể) - nhóm chịu trách nhiệm về tiêu chuẩn hài lòng vì đã đáp ứng được mục tiêu của mình nhưng cần có sự trợ giúp từ cộng đồng phát triển để thực hiện tiêu chuẩn.
• Khuyến nghị đề xuất Khuyến nghị được đề xuất) - ở giai đoạn này, tài liệu được gửi tới Hội đồng tư vấn của W3C để phê duyệt lần cuối.
• Bản dự thảo đang hoạt động - Một phiên bản hoàn thiện hơn của bản dự thảo đã được thảo luận và sửa đổi để cộng đồng xem xét.
• Bản thảo của người biên tập ( bản thảo biên tập) - phiên bản dự thảo của tiêu chuẩn sau khi các biên tập viên dự án thực hiện các thay đổi.
• Bản nháp ( Thông số kỹ thuật dự thảo) - phiên bản dự thảo đầu tiên của tiêu chuẩn.

×