Hoang  Kim

Hoang Kim

1661026200

Tìm Hiểu Sâu Về Thuộc Tính Float Của CSS

CSS floatlà thuộc tính định vị đặt một phần tử ở bên trái hoặc bên phải của vùng chứa và cho phép các phần tử nội tuyến quấn quanh nó. Trong quá khứ, floatnó đã bị mang tiếng xấu vì nó được sử dụng sai cho bố cục trang. Điều này đã khiến một số nhà phát triển đặt câu hỏi rằng liệu nó có không còn được dùng nữa hay nên tránh hoàn toàn!

CSS floatvẫn có liên quan. Chúng ta chỉ nên sử dụng nó trong ngữ cảnh phù hợp! Bài viết này thảo luận về lịch sử của CSS float và trình bày một số cách floatcó thể được sử dụng trong thiết kế web hiện đại để đạt được bố cục văn bản sáng tạo và các yếu tố thiết kế tuyệt đẹp.

Một lịch sử ngắn gọn củafloat

Thuộc floattính này đã được giới thiệu với CSS để cho phép các nhà phát triển web tạo bố cục kiểu tạp chí, chẳng hạn như đặt một hình ảnh bên trong một cột văn bản với dòng văn bản bao quanh nó, tương tự như bố cục được hiển thị bên dưới.

Hình ảnh trong Văn bản

Ví dụ sử dụng floatvới một hình ảnh trong một cột văn bản.

Thuộc floattính này được giới thiệu khi CSS còn nhỏ. Thật khó để nói chính xác khi nào, nhưng chắc chắn floatlà có trong các trình duyệt vào năm 2001! Vào thời điểm đó, CSS còn rất hạn chế! Khi mọi người muốn tạo bố cục toàn trang, họ thường tìm đến float. Đó là miền tây hoang dã hồi đó!

Ví dụ về lưới CSS

Flexbox hoặc CSS Grid được khuyên dùng cho các bố cục toàn trang như thế này.

Theo một số cách, sử dụng floatcho bố cục đã hoạt động. Tuy nhiên, những giọt nước mắt thường xảy ra sau đó vì điều này có nghĩa là sử dụng floatvượt quá mục đích dự định, dẫn đến các vấn đề về mã và bố cục phức tạp khó quản lý khi trang web phát triển.

Ngày nay, chỉ không sử dụng floatcho bố cục trang! Bạn nên coi việc sử dụng phao theo cách này là một kỹ thuật kế thừa . Flexbox và CSS Grid là những tùy chọn vượt trội hơn hẳn để tạo bố cục trang phức tạp .

Sử dụng floatđúng cách

Sử dụng floatkhi bạn muốn kéo một phần tử sang bên cạnh phần tử chứa trong khi vẫn cho phép các nội dung khác tự do chảy xung quanh nó. Không có bất kỳ phương pháp CSS nào khác để thực hiện điều này, vì vậy đừng ngại sử dụng nó!

Các giá trị hợp lệ cho floatmột từ khóa duy nhất từ ​​danh sách sau:

  • left: đặt phần tử ở phía bên trái của khối chứa nó
  • right: đặt phần tử ở phía bên phải của khối chứa nó
  • none: không làm nổi phần tử
  • inline-start: định vị phần tử ở phía nội dòng đầu tiên của khối chứa nó; đây là phía bên trái với các tập lệnh từ trái sang phải và bên phải với các tập lệnh từ phải sang trái
  • inline-end: định vị phần tử ở phía nội dòng cuối cùng của khối chứa nó; đây là phía bên phải với các tập lệnh từ trái sang phải và phía bên trái với các tập lệnh từ phải sang trái

Các giá trị inline-startinline-endlà tương đối mới. Chúng được gọi là giá trị logic . Chúng ta nên sử dụng những thứ này ngay bây giờ. Hỗ trợ trình duyệt là tốt và các giá trị logic này tạo ra các thiết kế toàn diện hơn.

Giá trị logic cho phép chúng tôi tạo bố cục chính xác cho các ngôn ngữ có hướng viết khác nhau với một giá trị duy nhất. Các giá trị logic thường được sử dụng nhất là leftright. Các ví dụ theo sau mô tả các giá trị logic ít được sử dụng hơn để minh họa cách chúng có thể được sử dụng trong các trường hợp sử dụng khác nhau.

Hãy thực hiện ví dụ trước đó. Hãy tạo một đơn giản articlecó một hình ảnh được thả nổi ở đầu đoạn thứ hai.

<article>
      <h1>England youngsters reaping the rewards of a pathway at Under-19 Euros</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
        voluptatem incidunt voluptas nobis placeat facilis commodi laboriosam
        similique id veritatis molestias, dignissimos praesentium, autem tenetur
        consequatur beatae itaque. Ipsa, iure.
      </p>
      <img src="img/players.jpg" alt="generic photo of men playing football" />
      <p>
        Mollitia delectus sit expedita nobis, nostrum est porro soluta earum
        accusamus! Architecto quae quas aliquid voluptatum rem alias voluptate
        quo quidem, delectus adipisci ipsum sunt maxime officia esse magni
        inventore?
      </p>
      <!--more paragraphs -->
</article>

Chúng ta chỉ cần thêm kiểu sau vào img:

img {
    float: inline-start;
}

Theo mặc định, không có khoảng cách giữa hình ảnh và văn bản. Có thể bạn sẽ muốn thêm lề để phân tách rõ ràng giữa hình ảnh và văn bản. Tôi đã nói thêm margin-inline-end: 4px;.

https://codepen.io/robatronbobby/pen/xxWxgje

Nếu chúng tôi sử dụng cùng một CSS nhưng với nội dung tiếng Ả Rập trong tài liệu HTML của chúng tôi, nó sẽ được căn chỉnh ở bên phải thay vì bên trái:

https://codepen.io/robatronbobby/pen/ExExZZe

Khá đơn giản, phải không?

Việc sử dụng phổ biến của floatphải thực sự đơn giản. Tuy nhiên, có một số vấn đề liên quan đến việc sử dụng floatmà bạn có thể gặp phải trong các tình huống khác nhau. Bằng cách hiểu sâu hơn về tính chất này, chúng ta có thể ngăn ngừa những kết quả khó hiểu!

Hình dung một phần tử nổi

Hãy làm rõ ràng về cách các phần tử nổi hoạt động.

Lấy ví dụ trước của chúng tôi, phiên bản tiếng Anh. Phần tử có floattập hợp trên đó ( imgphần tử trong trường hợp này) được đưa ra khỏi luồng bố cục bình thường của tài liệu và bị mắc kẹt ở phía bên trái của vùng chứa mẹ của nó ( articletrong trường hợp này là).

Thay vào đó, bất kỳ nội dung nào nằm bên dưới phần tử nổi trong luồng bố cục thông thường sẽ bao quanh phần tử đó. Khi làm như vậy, nó sẽ lấp đầy toàn bộ không gian bên phải của phần tử nổi. Sau đó, nó dừng lại và quy trình bố trí bình thường tiếp tục.

Để minh họa điều này, hãy sửa đổi ví dụ của chúng tôi. Chúng tôi sẽ thêm một số điểm đánh dấu vào các đoạn văn bị ảnh hưởng để chứng minh luồng tài liệu, như sau:

Đệm hình ảnh

Bản trình diễn hình ảnh nổi với phần đệm được thêm vào hình ảnh và văn bản đoạn văn được đánh dấu.

Đây là CodePen cho ví dụ này .

Trong ví dụ này, chúng tôi đã thêm một số paddingvào imgđể tạo thêm không gian xung quanh nó, để bạn có thể xem kích thước đầy đủ của các đoạn văn. Bằng cách thêm background-color:orange;vào các đoạn văn thứ hai, thứ ba và thứ tư, rõ ràng hơn là chúng chiếm toàn bộ chiều rộng của phần chứa article. Tuy nhiên, nội dung đoạn văn đang bị đẩy sang phía đối diện bởi hình ảnh nổi.

Hiểu những điều kỳ quặc của phao nổi

Điều gì đó có vẻ bất thường floatlà một phần tử cha chứa các phần tử float sẽ bị sụp đổ. Để hiểu tôi muốn nói gì về điều này, hãy làm một ví dụ khá giả. Hãy tạo một sectionchứa hai phần tử nổi.

Ở đây, hai cái imgnổi lên đầu container:

<section>
  <img src="img/1.jpg" alt="generic photo of footballers duelling for ball">
  <img src="img/2.jpg" alt="pitch overview">
</section>

<style>
  img {
    width: 300px;
    float: inline-start;
    margin-inline-end: 10px;
  }
</style>

Nếu chúng ta không thêm bất cứ thứ gì vào section, nó sẽ có chiều cao bằng 0!

Ngay bây giờ, nó trông như thế này:

Phần tử phần có hai hình ảnh

Một sectionphần tử có chứa hai hình ảnh nổi.

Nếu bạn kiểm tra sectionbằng DevTools của trình duyệt, bạn có thể xác nhận các kích thước được hiển thị trong tab Bố cục : chiều rộng 900px x chiều cao 0px.

Kích thước phần

Kích thước phần được hiển thị trong tab Bố cục DevTools.

Tuy nhiên, rất ít khả năng bạn sẽ tạo ra một phụ huynh chỉ có các phần tử nổi! Vì vậy, tại sao bạn cần phải biết điều này?

Chà, chúng ta đang sống trong một thế giới mà định luật Murphy , "bất cứ điều gì có thể sai sẽ trở thành sai", được chứng minh là đúng thường xuyên hơn bất kỳ ai mong muốn! Mọi thứ có thể xảy ra, và nếu chúng xảy ra, bạn có thể sẽ vò đầu bứt tai tự hỏi tại sao bố cục của bạn trông kỳ lạ!

Chọn không tham gia các phần tử nổi CSS vớiclear

Thuộc tính CSS clearlà một thuộc tính bổ sung cho float. Bạn có thể sử dụng nó khi bạn muốn một số phần tử không bị ảnh hưởng bởi các phần tử nổi. Bạn có thể đặt một phần tử được "xóa" ở một bên hoặc cả hai bên. Phần tử đã xóa sẽ được di chuyển xuống bên dưới bất kỳ phần tử nổi nào đứng trước nó.

Thuộc cleartính có một bộ giá trị tương tự như float:

  • none: phần tử không được chuyển xuống để xóa các phần tử nổi trong quá khứ
  • left: phần tử được chuyển xuống để xóa các dấu nổi bên trái trong quá khứ
  • right: phần tử được chuyển xuống để xóa các dấu nổi bên phải trong quá khứ
  • both: phần tử được di chuyển xuống để xóa cả dấu nổi bên trái và bên phải
  • inline-start: phần tử được di chuyển xuống để xóa các phao nổi ở phía bắt đầu của khối chứa nó; nghĩa là, bên trái nổi trên các tập lệnh từ trái sang phải và bên phải nổi trên các tập lệnh từ phải sang trái
  • inline-end: phần tử được di chuyển xuống để xóa các phao nổi ở phía cuối của khối chứa nó; nghĩa là, bên phải nổi trên các tập lệnh từ trái sang phải và bên trái nổi trên các tập lệnh từ phải sang trái

Ví dụ, dưới đây là một trang bài viết trên trang web có một số hình ảnh nổi. Bạn sẽ nhận thấy có một hình ảnh nổi ở cuối bài viết, chồng lên chân trang của trang web.

Chân trang chồng chéo hình ảnh nổi thứ hai

Hình ảnh nổi thứ hai chồng lên chân trang.

Để khắc phục trường hợp cụ thể này, chúng tôi có thể thêm clear: inline-end;hoặc clear: right;vào footer.

Nếu chúng ta muốn ngăn điều này xảy ra hoàn toàn, chúng ta có thể sử dụng clear:both;thay thế.

.no-floats {
    clear:both;
}

Để xem mã này hoạt động, hãy xem CodePen bên dưới. Bạn có thể chuyển đổi no-floatslớp trên footerđể xem tác dụng của nó.

https://codepen.io/robatronbobby/pen/ExExZZe

Bây giờ, chúng ta hãy xem xét một số ví dụ bổ sung.

Ví dụ CSS floatvới clear: Dấu ngoặc kép

Có lẽ ví dụ phổ biến nhất là một câu trích dẫn kéo. Một câu trích dẫn kéo là nơi mà một câu trích dẫn thú vị được lấy từ văn bản và được đặc trưng như một câu trích dẫn nội dung lớn. Các ấn phẩm tin tức và tạp chí bóng bẩy có xu hướng làm điều này để mang lại hương vị về những gì bài báo đang thảo luận trong các phần khác nhau.

https://codepen.io/robatronbobby/pen/vYRYZoK

Ví dụ CSS floatvới clear: Drop cap

Trong một số bố cục sách và tạp chí, bạn có thể tìm thấy một phong cách riêng được áp dụng cho chữ cái đầu tiên của từ đầu tiên trong đoạn văn. Nó có thể lớn hơn văn bản xung quanh và được tạo kiểu khác. Đôi khi, chữ cái này được gọi là một giọt nước.

Trong CSS, ::first-letterphần tử giả có thể được sử dụng để định kiểu chữ cái đầu tiên của một phần tử. Nếu chúng ta tạo một chữ cái đầu tiên lớn hơn, chúng ta có thể muốn thả nó vào đầu khối và có các dòng văn bản tiếp theo xung quanh nó.

Dưới đây là một ví dụ, trong đó chúng tôi làm cho chữ cái đầu tiên lớn hơn nhiều so với phần văn bản còn lại của đoạn văn bản và đưa nó lên đầu khối.

https://codepen.io/robatronbobby/pen/zYWYpGQ

Để đánh giá cao cách kiểu tạo kiểu này có thể nâng cao bố cục, hãy xem các phần mũ trong thiết kế Tạp chí Du lịch này của Bartosz Kwiecień :

Ví dụ về Drop Caps

Sáng tạo vớishape-outside

Cho đến nay, tất cả các ví dụ của chúng tôi đều liên quan đến các phần tử nổi có hình chữ nhật. Các phần tử tuân theo mô hình hộp và có các hộp giới hạn hình chữ nhật. Tuy nhiên, chúng ta không bị giới hạn trong một hình dạng duy nhất; với thuộc shape-outsidetính này, chúng ta có thể tạo ra tất cả các loại hình dạng tuyệt vời có thể ảnh hưởng đến dòng văn bản!

Chúng tôi có thể cung cấp một hình ảnh làm giá trị cho shape-outside. Hình dạng float được tính toán dựa trên kênh alpha của hình ảnh được chỉ định, được xác định bởi shape-image-threshold. Giá trị mặc định là 0,0 (hoàn toàn trong suốt).

Vì lý do này, nó chỉ thực sự có ý nghĩa khi sử dụng shape-outsidevới các định dạng hình ảnh hỗ trợ độ trong suốt như PNG, SVG và WebP. Nếu không, chúng ta sẽ vẫn nhận được một hình chữ nhật!

Ví dụ: giả sử chúng ta có một hình ảnh SVG có một hình ảnh duy nhất pathlà một ngôi sao màu đỏ với nền trong suốt. Đây là những gì sử dụng shape-outsidevới hình ảnh này trông như thế nào.

Hình dạng bên ngoài với hình ảnh

.star {
    width: 250px;
    float: left;
    shape-outside: url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
    shape-margin: 6px;
}

Ở đây, tôi đã sử dụng float: left;vì rất tiếc, Chrome (Linux) dường như có vấn đề với việc sử dụng float: inline-start;shape-outsidekết hợp.

Ngoài ra còn có một thuộc shape-margintính cho phép chúng tôi điều chỉnh lề xung quanh hình dạng.

Chúng tôi có thể cung cấp một <basic-shape>dưới dạng giá trị cho thuộc shape-outsidetính với các hàm sau : ,,, hoặc . Chúng được định nghĩa trong thông số kỹ thuật CSS Shapes Module Cấp 1 . Nếu bạn đã từng sử dụng thuộc tính, thì bạn cũng đã sử dụng các chức năng này.inset()()circle()ellipse()polygon()path()clip-path

Giả sử chúng ta muốn tạo một divvòng tròn màu xám và có dòng văn bản xung quanh nó, như trong hình dưới đây. Chúng ta có thể tạo điều này bằng cách sử dụng floatcùng với shape-outside: circle().

Hình dạng bên ngoài Vòng tròn

Đây là CSS để tạo vòng tròn màu xám với dòng chữ chạy:

.circle {
        border-radius: 50%;
        height: 200px;
        width: 200px;
        background-color: grey;
        float: right;
        shape-outside: circle();
}

Bạn có thể bỏ qua các giá trị cho circle(). Trong trường hợp của chúng tôi, các giá trị mặc định cho tham số <radius><position>cho chúng tôi kết quả mong muốn. Mặc định <position>là tâm của vòng tròn.

Đây là một CodePen có các ví dụ về ngôi sao màu đỏ và hình tròn màu xám.

Ví dụ CSS floatvới shape-outside: Văn bản kênh

Một ví dụ thú vị khác về việc sử dụng shape-outsidelà có một phần tử nổi ở cả bên trái và bên phải để tạo kênh văn bản.

Ví dụ, bạn có thể có hai tay gần như ôm lấy văn bản. Chúng ta có thể thả nổi hình ảnh của một bàn tay sang mỗi bên của đoạn văn và tạo cho đoạn văn có dạng hình tam giác bằng cách sử dụng shape-outsidehàm polygon().

<img class="left" src="hand.svg"/>
<img class="right" src="hand.svg"/>
<p>
  Sometimes a web page’s text content appears to be
  funneling your attention towards a spot on the page
  to drive you to follow a particular link. Sometimes
  you don’t notice.
</p>

<style>
.left {
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  height: 6em;
}

.right {
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  height: 6em;
  transform: rotateY(180deg);
}

p {
  text-align: center;
}
</style>Using a floated element with shape-outside on both sides.

Đây là CodePen đi kèm:

https://codepen.io/robatronbobby/pen/MWVKrjm

Chỉnh sửa hình dạng CSS

Nếu bạn đang tự hỏi làm thế nào để chỉnh sửa hình dạng CSS, tôi khuyên bạn nên sử dụng Firefox DevTools. Nếu bạn nhấp vào thuộc shape-outsidetính, bạn sẽ thấy biểu tượng “lưới” màu xanh lam bên cạnh nó và nó sẽ hiển thị đường viền của hình dạng trên trang (như được hiển thị bên dưới).

Đường viền của Hình dạng được đánh dấu

Bạn có thể di chuyển các điểm điều khiển (các vòng tròn trên đường dẫn) xung quanh và chỉnh sửa chúng giống như bạn làm với đường dẫn trong trình chỉnh sửa đồ họa. Theo tôi biết, Chrome DevTools không cung cấp tính năng tương tự!

Nếu bạn muốn có thêm ví dụ, Kristopher Van Sant có một bộ sưu tập CodePen đang bùng nổ với các ví dụ.shape-outside

Để xem cách một hình dạng độc đáo có thể được sử dụng trong một bố cục hoàn chỉnh, hãy xem bố cục tạp chí này, một lần nữa từ Bartosz Kwiecień .

Tạp chí du lịch

Tạp chí du lịch do Bartosz Kwiecień thiết kế.

Tính đến năm 2022, 95% trình duyệt trên toàn thế giới hỗ trợ thuộc shape-outsidetính này. Vì vậy, đừng ngại cung cấp cho nó một shot!

Kết thúc

floatdường như chưa được tận dụng trong lĩnh vực phát triển frontend ngày nay. Có thể, nó là nạn nhân của quá khứ, khi nó thường bị sử dụng sai cho các bố cục trang và mọi thứ được cho là "không sử dụng float". Tôi hy vọng rằng tôi đã cho bạn thấy điều đó floatvẫn phù hợp và có thể được sử dụng để tạo bố cục văn bản hấp dẫn. Tôi rất thích thấy mọi người sử dụng floattài sản này thường xuyên hơn để mang lại nhiều sáng tạo hơn cho web.

Nguồn: https://blog.logrocket.com/deep-dive-css-float-property/

#css 

What is GEEK

Buddha Community

Tìm Hiểu Sâu Về Thuộc Tính Float Của CSS
Hoang  Kim

Hoang Kim

1661026200

Tìm Hiểu Sâu Về Thuộc Tính Float Của CSS

CSS floatlà thuộc tính định vị đặt một phần tử ở bên trái hoặc bên phải của vùng chứa và cho phép các phần tử nội tuyến quấn quanh nó. Trong quá khứ, floatnó đã bị mang tiếng xấu vì nó được sử dụng sai cho bố cục trang. Điều này đã khiến một số nhà phát triển đặt câu hỏi rằng liệu nó có không còn được dùng nữa hay nên tránh hoàn toàn!

CSS floatvẫn có liên quan. Chúng ta chỉ nên sử dụng nó trong ngữ cảnh phù hợp! Bài viết này thảo luận về lịch sử của CSS float và trình bày một số cách floatcó thể được sử dụng trong thiết kế web hiện đại để đạt được bố cục văn bản sáng tạo và các yếu tố thiết kế tuyệt đẹp.

Một lịch sử ngắn gọn củafloat

Thuộc floattính này đã được giới thiệu với CSS để cho phép các nhà phát triển web tạo bố cục kiểu tạp chí, chẳng hạn như đặt một hình ảnh bên trong một cột văn bản với dòng văn bản bao quanh nó, tương tự như bố cục được hiển thị bên dưới.

Hình ảnh trong Văn bản

Ví dụ sử dụng floatvới một hình ảnh trong một cột văn bản.

Thuộc floattính này được giới thiệu khi CSS còn nhỏ. Thật khó để nói chính xác khi nào, nhưng chắc chắn floatlà có trong các trình duyệt vào năm 2001! Vào thời điểm đó, CSS còn rất hạn chế! Khi mọi người muốn tạo bố cục toàn trang, họ thường tìm đến float. Đó là miền tây hoang dã hồi đó!

Ví dụ về lưới CSS

Flexbox hoặc CSS Grid được khuyên dùng cho các bố cục toàn trang như thế này.

Theo một số cách, sử dụng floatcho bố cục đã hoạt động. Tuy nhiên, những giọt nước mắt thường xảy ra sau đó vì điều này có nghĩa là sử dụng floatvượt quá mục đích dự định, dẫn đến các vấn đề về mã và bố cục phức tạp khó quản lý khi trang web phát triển.

Ngày nay, chỉ không sử dụng floatcho bố cục trang! Bạn nên coi việc sử dụng phao theo cách này là một kỹ thuật kế thừa . Flexbox và CSS Grid là những tùy chọn vượt trội hơn hẳn để tạo bố cục trang phức tạp .

Sử dụng floatđúng cách

Sử dụng floatkhi bạn muốn kéo một phần tử sang bên cạnh phần tử chứa trong khi vẫn cho phép các nội dung khác tự do chảy xung quanh nó. Không có bất kỳ phương pháp CSS nào khác để thực hiện điều này, vì vậy đừng ngại sử dụng nó!

Các giá trị hợp lệ cho floatmột từ khóa duy nhất từ ​​danh sách sau:

  • left: đặt phần tử ở phía bên trái của khối chứa nó
  • right: đặt phần tử ở phía bên phải của khối chứa nó
  • none: không làm nổi phần tử
  • inline-start: định vị phần tử ở phía nội dòng đầu tiên của khối chứa nó; đây là phía bên trái với các tập lệnh từ trái sang phải và bên phải với các tập lệnh từ phải sang trái
  • inline-end: định vị phần tử ở phía nội dòng cuối cùng của khối chứa nó; đây là phía bên phải với các tập lệnh từ trái sang phải và phía bên trái với các tập lệnh từ phải sang trái

Các giá trị inline-startinline-endlà tương đối mới. Chúng được gọi là giá trị logic . Chúng ta nên sử dụng những thứ này ngay bây giờ. Hỗ trợ trình duyệt là tốt và các giá trị logic này tạo ra các thiết kế toàn diện hơn.

Giá trị logic cho phép chúng tôi tạo bố cục chính xác cho các ngôn ngữ có hướng viết khác nhau với một giá trị duy nhất. Các giá trị logic thường được sử dụng nhất là leftright. Các ví dụ theo sau mô tả các giá trị logic ít được sử dụng hơn để minh họa cách chúng có thể được sử dụng trong các trường hợp sử dụng khác nhau.

Hãy thực hiện ví dụ trước đó. Hãy tạo một đơn giản articlecó một hình ảnh được thả nổi ở đầu đoạn thứ hai.

<article>
      <h1>England youngsters reaping the rewards of a pathway at Under-19 Euros</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
        voluptatem incidunt voluptas nobis placeat facilis commodi laboriosam
        similique id veritatis molestias, dignissimos praesentium, autem tenetur
        consequatur beatae itaque. Ipsa, iure.
      </p>
      <img src="img/players.jpg" alt="generic photo of men playing football" />
      <p>
        Mollitia delectus sit expedita nobis, nostrum est porro soluta earum
        accusamus! Architecto quae quas aliquid voluptatum rem alias voluptate
        quo quidem, delectus adipisci ipsum sunt maxime officia esse magni
        inventore?
      </p>
      <!--more paragraphs -->
</article>

Chúng ta chỉ cần thêm kiểu sau vào img:

img {
    float: inline-start;
}

Theo mặc định, không có khoảng cách giữa hình ảnh và văn bản. Có thể bạn sẽ muốn thêm lề để phân tách rõ ràng giữa hình ảnh và văn bản. Tôi đã nói thêm margin-inline-end: 4px;.

https://codepen.io/robatronbobby/pen/xxWxgje

Nếu chúng tôi sử dụng cùng một CSS nhưng với nội dung tiếng Ả Rập trong tài liệu HTML của chúng tôi, nó sẽ được căn chỉnh ở bên phải thay vì bên trái:

https://codepen.io/robatronbobby/pen/ExExZZe

Khá đơn giản, phải không?

Việc sử dụng phổ biến của floatphải thực sự đơn giản. Tuy nhiên, có một số vấn đề liên quan đến việc sử dụng floatmà bạn có thể gặp phải trong các tình huống khác nhau. Bằng cách hiểu sâu hơn về tính chất này, chúng ta có thể ngăn ngừa những kết quả khó hiểu!

Hình dung một phần tử nổi

Hãy làm rõ ràng về cách các phần tử nổi hoạt động.

Lấy ví dụ trước của chúng tôi, phiên bản tiếng Anh. Phần tử có floattập hợp trên đó ( imgphần tử trong trường hợp này) được đưa ra khỏi luồng bố cục bình thường của tài liệu và bị mắc kẹt ở phía bên trái của vùng chứa mẹ của nó ( articletrong trường hợp này là).

Thay vào đó, bất kỳ nội dung nào nằm bên dưới phần tử nổi trong luồng bố cục thông thường sẽ bao quanh phần tử đó. Khi làm như vậy, nó sẽ lấp đầy toàn bộ không gian bên phải của phần tử nổi. Sau đó, nó dừng lại và quy trình bố trí bình thường tiếp tục.

Để minh họa điều này, hãy sửa đổi ví dụ của chúng tôi. Chúng tôi sẽ thêm một số điểm đánh dấu vào các đoạn văn bị ảnh hưởng để chứng minh luồng tài liệu, như sau:

Đệm hình ảnh

Bản trình diễn hình ảnh nổi với phần đệm được thêm vào hình ảnh và văn bản đoạn văn được đánh dấu.

Đây là CodePen cho ví dụ này .

Trong ví dụ này, chúng tôi đã thêm một số paddingvào imgđể tạo thêm không gian xung quanh nó, để bạn có thể xem kích thước đầy đủ của các đoạn văn. Bằng cách thêm background-color:orange;vào các đoạn văn thứ hai, thứ ba và thứ tư, rõ ràng hơn là chúng chiếm toàn bộ chiều rộng của phần chứa article. Tuy nhiên, nội dung đoạn văn đang bị đẩy sang phía đối diện bởi hình ảnh nổi.

Hiểu những điều kỳ quặc của phao nổi

Điều gì đó có vẻ bất thường floatlà một phần tử cha chứa các phần tử float sẽ bị sụp đổ. Để hiểu tôi muốn nói gì về điều này, hãy làm một ví dụ khá giả. Hãy tạo một sectionchứa hai phần tử nổi.

Ở đây, hai cái imgnổi lên đầu container:

<section>
  <img src="img/1.jpg" alt="generic photo of footballers duelling for ball">
  <img src="img/2.jpg" alt="pitch overview">
</section>

<style>
  img {
    width: 300px;
    float: inline-start;
    margin-inline-end: 10px;
  }
</style>

Nếu chúng ta không thêm bất cứ thứ gì vào section, nó sẽ có chiều cao bằng 0!

Ngay bây giờ, nó trông như thế này:

Phần tử phần có hai hình ảnh

Một sectionphần tử có chứa hai hình ảnh nổi.

Nếu bạn kiểm tra sectionbằng DevTools của trình duyệt, bạn có thể xác nhận các kích thước được hiển thị trong tab Bố cục : chiều rộng 900px x chiều cao 0px.

Kích thước phần

Kích thước phần được hiển thị trong tab Bố cục DevTools.

Tuy nhiên, rất ít khả năng bạn sẽ tạo ra một phụ huynh chỉ có các phần tử nổi! Vì vậy, tại sao bạn cần phải biết điều này?

Chà, chúng ta đang sống trong một thế giới mà định luật Murphy , "bất cứ điều gì có thể sai sẽ trở thành sai", được chứng minh là đúng thường xuyên hơn bất kỳ ai mong muốn! Mọi thứ có thể xảy ra, và nếu chúng xảy ra, bạn có thể sẽ vò đầu bứt tai tự hỏi tại sao bố cục của bạn trông kỳ lạ!

Chọn không tham gia các phần tử nổi CSS vớiclear

Thuộc tính CSS clearlà một thuộc tính bổ sung cho float. Bạn có thể sử dụng nó khi bạn muốn một số phần tử không bị ảnh hưởng bởi các phần tử nổi. Bạn có thể đặt một phần tử được "xóa" ở một bên hoặc cả hai bên. Phần tử đã xóa sẽ được di chuyển xuống bên dưới bất kỳ phần tử nổi nào đứng trước nó.

Thuộc cleartính có một bộ giá trị tương tự như float:

  • none: phần tử không được chuyển xuống để xóa các phần tử nổi trong quá khứ
  • left: phần tử được chuyển xuống để xóa các dấu nổi bên trái trong quá khứ
  • right: phần tử được chuyển xuống để xóa các dấu nổi bên phải trong quá khứ
  • both: phần tử được di chuyển xuống để xóa cả dấu nổi bên trái và bên phải
  • inline-start: phần tử được di chuyển xuống để xóa các phao nổi ở phía bắt đầu của khối chứa nó; nghĩa là, bên trái nổi trên các tập lệnh từ trái sang phải và bên phải nổi trên các tập lệnh từ phải sang trái
  • inline-end: phần tử được di chuyển xuống để xóa các phao nổi ở phía cuối của khối chứa nó; nghĩa là, bên phải nổi trên các tập lệnh từ trái sang phải và bên trái nổi trên các tập lệnh từ phải sang trái

Ví dụ, dưới đây là một trang bài viết trên trang web có một số hình ảnh nổi. Bạn sẽ nhận thấy có một hình ảnh nổi ở cuối bài viết, chồng lên chân trang của trang web.

Chân trang chồng chéo hình ảnh nổi thứ hai

Hình ảnh nổi thứ hai chồng lên chân trang.

Để khắc phục trường hợp cụ thể này, chúng tôi có thể thêm clear: inline-end;hoặc clear: right;vào footer.

Nếu chúng ta muốn ngăn điều này xảy ra hoàn toàn, chúng ta có thể sử dụng clear:both;thay thế.

.no-floats {
    clear:both;
}

Để xem mã này hoạt động, hãy xem CodePen bên dưới. Bạn có thể chuyển đổi no-floatslớp trên footerđể xem tác dụng của nó.

https://codepen.io/robatronbobby/pen/ExExZZe

Bây giờ, chúng ta hãy xem xét một số ví dụ bổ sung.

Ví dụ CSS floatvới clear: Dấu ngoặc kép

Có lẽ ví dụ phổ biến nhất là một câu trích dẫn kéo. Một câu trích dẫn kéo là nơi mà một câu trích dẫn thú vị được lấy từ văn bản và được đặc trưng như một câu trích dẫn nội dung lớn. Các ấn phẩm tin tức và tạp chí bóng bẩy có xu hướng làm điều này để mang lại hương vị về những gì bài báo đang thảo luận trong các phần khác nhau.

https://codepen.io/robatronbobby/pen/vYRYZoK

Ví dụ CSS floatvới clear: Drop cap

Trong một số bố cục sách và tạp chí, bạn có thể tìm thấy một phong cách riêng được áp dụng cho chữ cái đầu tiên của từ đầu tiên trong đoạn văn. Nó có thể lớn hơn văn bản xung quanh và được tạo kiểu khác. Đôi khi, chữ cái này được gọi là một giọt nước.

Trong CSS, ::first-letterphần tử giả có thể được sử dụng để định kiểu chữ cái đầu tiên của một phần tử. Nếu chúng ta tạo một chữ cái đầu tiên lớn hơn, chúng ta có thể muốn thả nó vào đầu khối và có các dòng văn bản tiếp theo xung quanh nó.

Dưới đây là một ví dụ, trong đó chúng tôi làm cho chữ cái đầu tiên lớn hơn nhiều so với phần văn bản còn lại của đoạn văn bản và đưa nó lên đầu khối.

https://codepen.io/robatronbobby/pen/zYWYpGQ

Để đánh giá cao cách kiểu tạo kiểu này có thể nâng cao bố cục, hãy xem các phần mũ trong thiết kế Tạp chí Du lịch này của Bartosz Kwiecień :

Ví dụ về Drop Caps

Sáng tạo vớishape-outside

Cho đến nay, tất cả các ví dụ của chúng tôi đều liên quan đến các phần tử nổi có hình chữ nhật. Các phần tử tuân theo mô hình hộp và có các hộp giới hạn hình chữ nhật. Tuy nhiên, chúng ta không bị giới hạn trong một hình dạng duy nhất; với thuộc shape-outsidetính này, chúng ta có thể tạo ra tất cả các loại hình dạng tuyệt vời có thể ảnh hưởng đến dòng văn bản!

Chúng tôi có thể cung cấp một hình ảnh làm giá trị cho shape-outside. Hình dạng float được tính toán dựa trên kênh alpha của hình ảnh được chỉ định, được xác định bởi shape-image-threshold. Giá trị mặc định là 0,0 (hoàn toàn trong suốt).

Vì lý do này, nó chỉ thực sự có ý nghĩa khi sử dụng shape-outsidevới các định dạng hình ảnh hỗ trợ độ trong suốt như PNG, SVG và WebP. Nếu không, chúng ta sẽ vẫn nhận được một hình chữ nhật!

Ví dụ: giả sử chúng ta có một hình ảnh SVG có một hình ảnh duy nhất pathlà một ngôi sao màu đỏ với nền trong suốt. Đây là những gì sử dụng shape-outsidevới hình ảnh này trông như thế nào.

Hình dạng bên ngoài với hình ảnh

.star {
    width: 250px;
    float: left;
    shape-outside: url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
    shape-margin: 6px;
}

Ở đây, tôi đã sử dụng float: left;vì rất tiếc, Chrome (Linux) dường như có vấn đề với việc sử dụng float: inline-start;shape-outsidekết hợp.

Ngoài ra còn có một thuộc shape-margintính cho phép chúng tôi điều chỉnh lề xung quanh hình dạng.

Chúng tôi có thể cung cấp một <basic-shape>dưới dạng giá trị cho thuộc shape-outsidetính với các hàm sau : ,,, hoặc . Chúng được định nghĩa trong thông số kỹ thuật CSS Shapes Module Cấp 1 . Nếu bạn đã từng sử dụng thuộc tính, thì bạn cũng đã sử dụng các chức năng này.inset()()circle()ellipse()polygon()path()clip-path

Giả sử chúng ta muốn tạo một divvòng tròn màu xám và có dòng văn bản xung quanh nó, như trong hình dưới đây. Chúng ta có thể tạo điều này bằng cách sử dụng floatcùng với shape-outside: circle().

Hình dạng bên ngoài Vòng tròn

Đây là CSS để tạo vòng tròn màu xám với dòng chữ chạy:

.circle {
        border-radius: 50%;
        height: 200px;
        width: 200px;
        background-color: grey;
        float: right;
        shape-outside: circle();
}

Bạn có thể bỏ qua các giá trị cho circle(). Trong trường hợp của chúng tôi, các giá trị mặc định cho tham số <radius><position>cho chúng tôi kết quả mong muốn. Mặc định <position>là tâm của vòng tròn.

Đây là một CodePen có các ví dụ về ngôi sao màu đỏ và hình tròn màu xám.

Ví dụ CSS floatvới shape-outside: Văn bản kênh

Một ví dụ thú vị khác về việc sử dụng shape-outsidelà có một phần tử nổi ở cả bên trái và bên phải để tạo kênh văn bản.

Ví dụ, bạn có thể có hai tay gần như ôm lấy văn bản. Chúng ta có thể thả nổi hình ảnh của một bàn tay sang mỗi bên của đoạn văn và tạo cho đoạn văn có dạng hình tam giác bằng cách sử dụng shape-outsidehàm polygon().

<img class="left" src="hand.svg"/>
<img class="right" src="hand.svg"/>
<p>
  Sometimes a web page’s text content appears to be
  funneling your attention towards a spot on the page
  to drive you to follow a particular link. Sometimes
  you don’t notice.
</p>

<style>
.left {
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  height: 6em;
}

.right {
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  height: 6em;
  transform: rotateY(180deg);
}

p {
  text-align: center;
}
</style>Using a floated element with shape-outside on both sides.

Đây là CodePen đi kèm:

https://codepen.io/robatronbobby/pen/MWVKrjm

Chỉnh sửa hình dạng CSS

Nếu bạn đang tự hỏi làm thế nào để chỉnh sửa hình dạng CSS, tôi khuyên bạn nên sử dụng Firefox DevTools. Nếu bạn nhấp vào thuộc shape-outsidetính, bạn sẽ thấy biểu tượng “lưới” màu xanh lam bên cạnh nó và nó sẽ hiển thị đường viền của hình dạng trên trang (như được hiển thị bên dưới).

Đường viền của Hình dạng được đánh dấu

Bạn có thể di chuyển các điểm điều khiển (các vòng tròn trên đường dẫn) xung quanh và chỉnh sửa chúng giống như bạn làm với đường dẫn trong trình chỉnh sửa đồ họa. Theo tôi biết, Chrome DevTools không cung cấp tính năng tương tự!

Nếu bạn muốn có thêm ví dụ, Kristopher Van Sant có một bộ sưu tập CodePen đang bùng nổ với các ví dụ.shape-outside

Để xem cách một hình dạng độc đáo có thể được sử dụng trong một bố cục hoàn chỉnh, hãy xem bố cục tạp chí này, một lần nữa từ Bartosz Kwiecień .

Tạp chí du lịch

Tạp chí du lịch do Bartosz Kwiecień thiết kế.

Tính đến năm 2022, 95% trình duyệt trên toàn thế giới hỗ trợ thuộc shape-outsidetính này. Vì vậy, đừng ngại cung cấp cho nó một shot!

Kết thúc

floatdường như chưa được tận dụng trong lĩnh vực phát triển frontend ngày nay. Có thể, nó là nạn nhân của quá khứ, khi nó thường bị sử dụng sai cho các bố cục trang và mọi thứ được cho là "không sử dụng float". Tôi hy vọng rằng tôi đã cho bạn thấy điều đó floatvẫn phù hợp và có thể được sử dụng để tạo bố cục văn bản hấp dẫn. Tôi rất thích thấy mọi người sử dụng floattài sản này thường xuyên hơn để mang lại nhiều sáng tạo hơn cho web.

Nguồn: https://blog.logrocket.com/deep-dive-css-float-property/

#css 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

How it works is that we will have a div that will have the image as a background. On that, we put our text element, using blend-mode it will show through the image.

The result you can see and touch on this Codepen.

#css #css3 #html-css #css-grids #learning-css #html-css-basics