Làm cách nào để giữ nội dung trên cùng một dòng trong html?

Question

Một trong những điều tốt nhất về CSS là nó cho chúng ta khả năng định vị nội dung và các thành phần trên một trang theo bất kỳ cách nào có thể tưởng tượng được, mang lại cấu trúc cho các thiết kế của chúng ta và giúp làm cho nội dung dễ hiểu hơn

Nội dung chính Show

Định vị bằng phao
Phao trong thực tế
Dọn dẹp & chứa phao
Trong thực tế
Định vị với Inline-Block
Inline-Block trong thực tế
Xóa khoảng trắng giữa các phần tử khối nội tuyến
Tạo bố cục có thể tái sử dụng
Trong thực tế
Demo và mã nguồn
Các yếu tố định vị độc đáo
Định vị tương đối
định vị tuyệt đối
Tóm lược

Có một số loại định vị khác nhau trong CSS và mỗi loại có ứng dụng riêng. Trong chương này, chúng ta sẽ xem xét một vài trường hợp sử dụng khác nhau—tạo bố cục có thể tái sử dụng và định vị duy nhất các phần tử dùng một lần—và mô tả một vài cách để thực hiện từng trường hợp.

Định vị bằng phao

Một cách để định vị các phần tử trên một trang là sử dụng thuộc tính

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

0. Thuộc tính

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

0 khá linh hoạt và có thể được sử dụng theo nhiều cách khác nhau

Về cơ bản, thuộc tính

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

0 cho phép chúng ta lấy một phần tử, xóa nó khỏi quy trình bình thường của trang và đặt nó ở bên trái hoặc bên phải của phần tử cha của nó. Tất cả các phần tử khác trên trang sau đó sẽ chảy xung quanh phần tử nổi. Ví dụ, một phần tử

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

3 nổi ở bên cạnh một vài đoạn văn bản sẽ cho phép các đoạn bao quanh hình ảnh khi cần thiết

Khi thuộc tính

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

0 được sử dụng trên nhiều phần tử cùng một lúc, nó cung cấp khả năng tạo bố cục bằng các phần tử nổi ngay cạnh hoặc đối diện nhau, như được thấy trong bố cục nhiều cột

Thuộc tính

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

0 chấp nhận một vài giá trị;

1
2
3
4
img {
  float: left;
}
Phao trong thực tế
Hãy tạo một bố cục trang chung với tiêu đề ở trên cùng, hai cột ở giữa và chân trang ở dưới cùng. Lý tưởng nhất là trang này sẽ được đánh dấu bằng cách sử dụng các phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
20 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21 như đã thảo luận trong Bài 2, “Làm quen với HTML. ” Bên trong phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
22, HTML có thể trông như thế này
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
5section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6
Bố cục không có Floats Demo
Xem Bố cục bút không có dấu nổi của Shay Howe (@shayhowe) trên CodePen
Ở đây, các phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
20, dưới dạng các phần tử cấp khối, sẽ được xếp chồng lên nhau theo mặc định. Tuy nhiên, chúng tôi muốn những yếu tố này ngồi cạnh nhau. Bằng cách di chuyển section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 đến section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
20 đến section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
7, chúng ta có thể định vị chúng thành hai cột đối diện nhau. CSS của chúng ta sẽ trông như thế này
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
3____24Để tham khảo, khi một phần tử được thả nổi, nó sẽ nổi đến tận cạnh của phần tử cha của nó. Nếu không có phần tử cha, thì phần tử được thả nổi sẽ trôi đến tận mép trang
Khi chúng tôi thả nổi một phần tử, chúng tôi đưa nó ra khỏi luồng bình thường của tài liệu HTML. Điều này làm cho chiều rộng của phần tử đó mặc định bằng chiều rộng của nội dung bên trong nó. Đôi khi, chẳng hạn như khi chúng tôi tạo cột cho bố cục có thể sử dụng lại, hành vi này không được mong muốn. Nó có thể được sửa bằng cách thêm một giá trị thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
29 cố định vào mỗi cột. Ngoài ra, để ngăn các phần tử nổi chạm vào nhau, khiến nội dung của phần tử này nằm ngay bên cạnh nội dung của phần tử kia, chúng ta có thể sử dụng thuộc tính section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
60 để tạo khoảng cách giữa các phần tử
Ở đây, chúng tôi đang mở rộng khối mã trước đó, thêm 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
60 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
29 vào mỗi cột để định hình rõ hơn kết quả mong muốn của chúng tôi
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
Bố cục với Floats Demo
Xem Bố cục bút có phao của Shay Howe (@shayhowe) trên CodePen
Phao nổi có thể thay đổi giá trị hiển thị của phần tử
Khi thả nổi một phần tử, điều quan trọng là phải nhận ra rằng một phần tử bị xóa khỏi quy trình bình thường của trang và điều đó có thể thay đổi giá trị 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63 mặc định của phần tử. Thuộc tính section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
0 dựa trên một phần tử có giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63 là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
66 và có thể thay đổi giá trị mặc định của phần tử là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63 nếu nó chưa được hiển thị dưới dạng phần tử cấp khối
Ví dụ: một phần tử có giá trị 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63 là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
69, chẳng hạn như phần tử cấp độ nội tuyến img {
  float: left;
}
00, bỏ qua mọi giá trị thuộc tính img {
  float: left;
}
01 hoặc section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
29. Tuy nhiên, nếu phần tử cấp độ nội tuyến đó được thả nổi, giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63 của nó sẽ được thay đổi thành khối và sau đó nó có thể chấp nhận các giá trị thuộc tính img {
  float: left;
}
01 hoặc section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
29
Khi chúng ta thả nổi các phần tử, chúng ta phải theo dõi xem các giá trị thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63 của chúng bị ảnh hưởng như thế nào
Với hai cột, chúng ta có thể di chuyển một cột sang trái và một cột khác sang phải, nhưng với nhiều cột hơn, chúng ta phải thay đổi cách tiếp cận của mình. Ví dụ: giả sử chúng tôi muốn có một hàng gồm ba cột giữa các phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21 của chúng tôi. Nếu chúng ta bỏ phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
20 và sử dụng ba phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9, thì HTML của chúng ta có thể trông như thế này
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
2____26Để định vị ba phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 này trong một hàng có ba cột, thay vì thả nổi một cột sang trái và một cột sang phải, chúng ta sẽ thả cả ba phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 sang trái. Chúng ta cũng cần điều chỉnh độ rộng của các phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 để tính đến các cột bổ sung và để chúng nằm cạnh nhau
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
2img {
  float: left;
}
1Ở đây chúng tôi có ba cột, tất cả đều có giá trị lề và chiều rộng bằng nhau và tất cả đều được thả nổi vào 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6
Bố cục ba cột với bản demo nổi
Xem Bố cục ba cột bút có dấu nổi của Shay Howe (@shayhowe) trên CodePen
Dọn dẹp & chứa phao
Thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
0 ban đầu được thiết kế để cho phép nội dung bao quanh hình ảnh. Một hình ảnh có thể được thả nổi và tất cả nội dung xung quanh hình ảnh đó có thể chảy xung quanh nó một cách tự nhiên. Mặc dù điều này hoạt động tốt cho hình ảnh, thuộc tính section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
0 thực sự không bao giờ được sử dụng cho mục đích bố cục và định vị, do đó, thuộc tính này có một vài cạm bẫy
Một trong những cạm bẫy đó là đôi khi các kiểu phù hợp sẽ không hiển thị trên phần tử mà nó nằm bên cạnh hoặc là phần tử cha của phần tử nổi. Khi một phần tử được thả nổi, nó sẽ bị loại khỏi quy trình bình thường của trang và do đó, kiểu của các phần tử xung quanh phần tử nổi đó có thể bị ảnh hưởng tiêu cực
Các giá trị thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
60 và img {
  float: left;
}
18 thường không được diễn giải chính xác, khiến chúng hòa trộn vào phần tử nổi; 
Một cạm bẫy khác là đôi khi nội dung không mong muốn bắt đầu bao quanh một phần tử nổi. Việc xóa một phần tử khỏi luồng của tài liệu cho phép tất cả các phần tử xung quanh phần tử nổi bao bọc và sử dụng mọi khoảng trống có sẵn xung quanh phần tử nổi, điều này thường không mong muốn
Với ví dụ hai cột trước của chúng tôi, sau khi chúng tôi thả nổi các phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
20 và trước khi chúng tôi đặt giá trị thuộc tính chiều rộng cho một trong hai phần tử đó, nội dung trong phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21 sẽ được bao bọc ở giữa hai phần tử nổi phía trên nó, điền vào . Do đó, phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21 sẽ nằm trong rãnh giữa các phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
20, chiếm dung lượng có sẵn
Bố cục không Cleared hoặc Contained Floats Demo
Xem Bố cục bút không xóa hoặc chứa số float của Shay Howe (@shayhowe) trên CodePen
Để ngăn nội dung bao quanh các phần tử nổi, chúng ta cần xóa hoặc chứa các phần tử nổi đó và đưa trang trở lại quy trình bình thường. Chúng ta sẽ tiếp tục bằng cách xem cách xóa số float và sau đó chúng ta sẽ xem cách chứa số float
Xóa phao
Việc xóa số float được thực hiện bằng thuộc tính 
img {
  float: left;
}
25, thuộc tính này chấp nhận một vài giá trị khác nhau. các giá trị được sử dụng phổ biến nhất là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
7 và img {
  float: left;
}
28
1
2
3
4
img {
  float: left;
}
3Giá trị 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6 sẽ xóa số float bên trái, trong khi giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
7 sẽ xóa số float bên phải. Tuy nhiên, giá trị img {
  float: left;
}
28 sẽ xóa cả số float bên trái và bên phải và thường là giá trị lý tưởng nhất
Quay trở lại ví dụ trước của chúng tôi, nếu chúng tôi sử dụng thuộc tính 
img {
  float: left;
}
25 với giá trị của img {
  float: left;
}
28 trên phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21, chúng tôi có thể xóa số float. Điều quan trọng là việc xóa này được áp dụng cho một phần tử xuất hiện sau các phần tử nổi, không phải trước đó, để đưa trang trở lại quy trình bình thường của nó
1
2
3
4
img {
  float: left;
}
5
Bố cục với Cleared Floats Demo
Xem Bố cục bút với các dấu nổi đã xóa của Shay Howe (@shayhowe) trên CodePen
chứa phao
Thay vì xóa số float, một tùy chọn khác là chứa số float. Kết quả của việc chứa số float so với kết quả của việc xóa chúng gần như giống nhau; 
Để chứa float, các phần tử float phải nằm trong phần tử cha. Phần tử cha sẽ hoạt động như một thùng chứa, khiến luồng tài liệu hoàn toàn bình thường bên ngoài nó. CSS cho phần tử cha đó, được đại diện bởi lớp 
img {
  float: left;
}
35 bên dưới, được hiển thị ở đây
img {
  float: left;
}
6img {
  float: left;
}
7Có khá nhiều thứ đang diễn ra ở đây, nhưng về cơ bản, những gì CSS đang làm là xóa mọi phần tử nổi trong phần tử có lớp 
img {
  float: left;
}
35 và đưa luồng tài liệu trở lại bình thường
Cụ thể hơn, các phần tử giả 
img {
  float: left;
}
37 và img {
  float: left;
}
38, như đã đề cập trong bài tập Bài 4, là các phần tử được sinh động bên trên và bên dưới phần tử có lớp là img {
  float: left;
}
35. Những phần tử đó không bao gồm bất kỳ nội dung nào và được hiển thị dưới dạng phần tử cấp img {
  float: left;
}
40, giống như phần tử cấp khối. Phần tử được tạo động sau phần tử có lớp img {
  float: left;
}
35 đang xóa các số float trong phần tử có lớp img {
  float: left;
}
35, giống như lớp img {
  float: left;
}
25 trước đó. Và cuối cùng, bản thân phần tử có lớp img {
  float: left;
}
35 cũng xóa bất kỳ số float nào có thể xuất hiện phía trên nó, trong trường hợp có thể tồn tại số float trái hoặc phải. Nó cũng bao gồm một thủ thuật nhỏ để giúp các trình duyệt cũ hơn chơi tốt
Nó có nhiều mã hơn so với khai báo 
img {
  float: left;
}
45, nhưng nó có thể tỏ ra khá hữu ích
Nhìn vào bố cục trang hai cột của chúng tôi từ trước, chúng tôi có thể bọc các phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
20 bằng một phần tử cha. Phần tử cha đó sau đó cần chứa các số float trong chính nó. Mã sẽ trông như thế này
HTMLsection {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
3img {
  float: left;
}
9 CSSsection {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
50section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
51
Bố cục với Bản trình diễn nổi có chứa
Xem Bố cục bút có phao nổi của Shay Howe (@shayhowe) trên CodePen
Kỹ thuật hiển thị ở đây để chứa các phần tử được gọi là "xóa rõ ràng" và thường có thể được tìm thấy trong các trang web khác có tên lớp là 
img {
  float: left;
}
48 hoặc img {
  float: left;
}
49. Tuy nhiên, chúng tôi đã chọn sử dụng tên lớp của img {
  float: left;
}
35 vì nó đại diện cho một nhóm các phần tử và thể hiện nội dung tốt hơn
Khi các phần tử được thả nổi, điều quan trọng là phải lưu ý cách chúng ảnh hưởng đến luồng của trang và đảm bảo luồng của trang được đặt lại bằng cách xóa hoặc chứa các phần nổi khi cần thiết. Việc không theo dõi số float có thể gây ra khá nhiều vấn đề đau đầu, đặc biệt là khi các trang bắt đầu có nhiều hàng nhiều cột
Trong thực tế
Hãy quay lại trang web Styles Conference để thử thả nổi một số nội dung
Điều đầu tiên, trước khi chúng ta bắt đầu thả nổi bất kỳ phần tử nào, hãy cung cấp một cách để chứa các phần tử nổi đó bằng cách thêm phần rõ ràng vào CSS của chúng ta. Trong tệp 
img {
  float: left;
}
51, ngay bên dưới các kiểu lưới của chúng ta, hãy thêm phần rõ ràng bên dưới tên lớp img {
  float: left;
}
35, giống như trước đây
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
52section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
53
Bây giờ chúng ta có thể chứa các số float, hãy thả phần chính 
img {
  float: left;
}
53 trong phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8 sang bên trái và cho phép tất cả nội dung khác trong tiêu đề bao quanh bên phải của nó
Để làm điều này, hãy thêm một lớp 
img {
  float: left;
}
55 vào phần tử img {
  float: left;
}
53. Sau đó, trong CSS của chúng tôi, hãy thêm một phần kiểu mới cho tiêu đề chính. Trong phần này, chúng tôi sẽ chọn phần tử img {
  float: left;
}
53 với lớp img {
  float: left;
}
55 và sau đó section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
0 nó ở bên trái
HTML1
2
3
4
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
55 CSSsection {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
56section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
57
Trong khi chúng tôi đang ở đó, hãy thêm một chút chi tiết vào logo của chúng tôi. Chúng tôi sẽ bắt đầu bằng cách đặt một phần tử 
img {
  float: left;
}
60, hoặc ngắt dòng, giữa từ “Phong cách” và từ “Hội nghị” để buộc văn bản logo của chúng tôi nằm trên hai dòng
Trong CSS, hãy thêm một đường viền vào đầu logo của chúng ta và một số 
img {
  float: left;
}
18 dọc để tạo không gian cho logo
HTML1
2
3
4
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
59 CSSsection {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
2section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
61
Bởi vì chúng tôi thả nổi phần tử 
img {
  float: left;
}
53, chúng tôi sẽ muốn chứa section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
0 đó. Phần tử cha gần nhất của phần tử img {
  float: left;
}
53 là phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8, vì vậy chúng tôi sẽ muốn thêm lớp của img {
  float: left;
}
35 vào phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8. Việc làm này sẽ áp dụng các kiểu Clearfix mà chúng ta đã thiết lập trước đó cho phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8
1
2
3
4
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63
Phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8 đang hình thành, vì vậy hãy xem phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21. Giống như chúng ta đã làm với phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8, chúng ta sẽ thả bản quyền của mình sang bên trái trong phần tử img {
  float: left;
}
72 và để tất cả các phần tử khác bao quanh nó ở bên phải
Tuy nhiên, không giống như phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8, chúng ta sẽ không sử dụng một lớp trực tiếp trên phần tử float. Lần này chúng ta sẽ áp dụng một lớp cho cha của phần tử được thả nổi và sử dụng bộ chọn CSS duy nhất để chọn phần tử rồi thả nổi phần tử đó
Hãy bắt đầu bằng cách thêm lớp 
img {
  float: left;
}
74 vào phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21. Bởi vì chúng tôi biết rằng chúng tôi sẽ thả nổi một phần tử trong phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21, chúng tôi cũng nên thêm lớp img {
  float: left;
}
35 trong khi chúng tôi đang ở đó
1
2
3
4
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
65
Bây giờ lớp của 
img {
  float: left;
}
74 nằm trên phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21, chúng ta có thể sử dụng lớp đó để sơ tuyển phần tử img {
  float: left;
}
72 bằng CSS. Chúng tôi sẽ muốn chọn và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
0 phần tử img {
  float: left;
}
72 cho phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6. Đừng quên tạo một phần mới trong tệp img {
  float: left;
}
51 của chúng tôi cho các kiểu chân trang chính này
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
56____167Để xem xét, ở đây chúng tôi đang chọn phần tử 
img {
  float: left;
}
72, phần tử này phải nằm trong một phần tử có giá trị thuộc tính lớp là img {
  float: left;
}
74, chẳng hạn như phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21 của chúng tôi chẳng hạn
Cuối cùng, hãy đặt một số 
img {
  float: left;
}
18 ở trên cùng và dưới cùng của phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21 để giúp tách nó ra khỏi phần còn lại của trang hơn một chút. Chúng ta có thể làm điều này trực tiếp bằng cách sử dụng lớp img {
  float: left;
}
74 với bộ chọn lớp
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
5section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
69
Với tất cả những thay đổi này đối với các yếu tố 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21, chúng tôi phải đảm bảo thực hiện chúng trên mọi trang, không chỉ trang img {
  float: left;
}
93
Hình 5Với một vài số float, các yếu tố 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
8 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
21 trên trang chủ Hội nghị Phong cách của chúng tôi sẽ kết hợp với nhau
Định vị với Inline-Block
Ngoài việc sử dụng float, một cách khác mà chúng ta có thể định vị nội dung là sử dụng thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63 kết hợp với giá trị img {
  float: left;
}
97. Phương thức inline-block, như chúng ta sẽ thảo luận, chủ yếu hữu ích cho việc bố trí các trang hoặc đặt các phần tử cạnh nhau trong một dòng
Nhớ lại rằng giá trị 
img {
  float: left;
}
97 cho thuộc tính section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63 sẽ hiển thị các phần tử trong một dòng đồng thời cho phép chúng chấp nhận tất cả các thuộc tính của mô hình hộp, bao gồm img {
  float: left;
}
01, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
29, img {
  float: left;
}
18, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
503 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
60. Sử dụng các phần tử khối nội tuyến cho phép chúng tôi tận dụng tối đa mô hình hộp mà không phải lo lắng về việc xóa bất kỳ số float nào
Inline-Block trong thực tế
Hãy xem ví dụ ba cột của chúng tôi từ trước. Chúng tôi sẽ bắt đầu bằng cách giữ nguyên HTML của chúng tôi
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
2____26Bây giờ thay vì thả nổi ba phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 của chúng ta, chúng ta sẽ thay đổi giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
63 của chúng thành img {
  float: left;
}
97, chỉ để lại các thuộc tính section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
60 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
29 từ trước đó. CSS kết quả của chúng tôi sẽ trông như thế này
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
2____233Thật không may, một mình mã này không hoàn toàn làm được điều đó và phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 cuối cùng được đẩy sang một hàng mới. Hãy nhớ rằng, vì các phần tử khối nội tuyến được hiển thị trên cùng một dòng với nhau, nên chúng bao gồm một khoảng trắng giữa chúng. Khi kích thước của mỗi khoảng trắng đơn lẻ được thêm vào các giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
29 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
60 theo chiều ngang của tất cả các phần tử trong hàng, tổng chiều rộng sẽ trở nên quá lớn, đẩy phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 cuối cùng sang một hàng mới. Để hiển thị tất cả các phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 trên cùng một hàng, phải xóa khoảng trắng giữa mỗi phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9
Inline-Block Elements với White Space Demo
Xem Các thành phần khối trong dòng bút có khoảng trắng của Shay Howe (@shayhowe) trên CodePen
Xóa khoảng trắng giữa các phần tử khối nội tuyến
Có một số cách để loại bỏ khoảng cách giữa các phần tử khối nội tuyến và một số cách phức tạp hơn những cách khác. Chúng ta sẽ tập trung vào hai trong số những cách dễ nhất, cả hai đều xảy ra bên trong HTML
Giải pháp đầu tiên là đặt mỗi thẻ mở của phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 mới trên cùng một dòng với thẻ đóng của phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 trước đó. Thay vì sử dụng một dòng mới cho mỗi phần tử, chúng tôi sẽ kết thúc và bắt đầu các phần tử trên cùng một dòng. HTML của chúng tôi có thể trông như thế này
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
56section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
35Viết các phần tử khối nội tuyến theo cách này đảm bảo rằng khoảng cách giữa các phần tử khối nội tuyến trong HTML không tồn tại; 
Inline-Block Elements không có White Space Demo
Xem Các phần tử khối trong dòng bút không có khoảng trắng của Shay Howe (@shayhowe) trên CodePen
Một cách khác để xóa khoảng trắng giữa các phần tử khối nội tuyến là mở một nhận xét HTML trực tiếp sau thẻ đóng của phần tử khối nội tuyến. Sau đó, đóng nhận xét HTML ngay trước thẻ mở phần tử khối nội tuyến tiếp theo. Làm điều này cho phép các phần tử khối nội tuyến bắt đầu và kết thúc trên các dòng HTML riêng biệt và "nhận xét" bất kỳ khoảng trống tiềm năng nào giữa các phần tử. Mã kết quả sẽ trông như thế này
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
36section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
37Cả hai tùy chọn này đều không hoàn hảo, nhưng chúng hữu ích. Tôi có xu hướng ủng hộ việc sử dụng nhận xét để tổ chức tốt hơn, nhưng bạn chọn tùy chọn nào hoàn toàn tùy thuộc vào bạn
Tạo bố cục có thể tái sử dụng
Khi xây dựng một trang web, tốt nhất bạn nên viết các kiểu mô-đun có thể được sử dụng lại ở nơi khác và các bố cục có thể sử dụng lại được xếp hạng cao trong danh sách mã có thể sử dụng lại. Bố cục có thể được tạo bằng cách sử dụng phần tử float hoặc phần tử khối nội tuyến, nhưng cách nào hoạt động tốt nhất và tại sao?
Việc sử dụng các phần tử float hay inline-block để bố trí cấu trúc của một trang có tốt hơn hay không vẫn còn gây tranh luận. Cách tiếp cận của tôi là sử dụng các phần tử khối nội tuyến để tạo lưới—hoặc bố cục—của một trang và sau đó sử dụng các phần nổi khi tôi muốn nội dung bao quanh một phần tử nhất định (như phần nổi được dự định thực hiện với hình ảnh). Nói chung, tôi cũng thấy các phần tử khối nội tuyến dễ làm việc hơn
Điều đó nói rằng, sử dụng bất cứ điều gì tốt nhất cho bạn. Nếu bạn cảm thấy thoải mái với cách tiếp cận này hơn cách tiếp cận khác, thì hãy tiếp tục
Hiện tại, có các thông số kỹ thuật CSS mới đang được triển khai—cụ thể là các thuộc tính dựa trên 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
518 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
519—sẽ giúp giải quyết cách bố cục trang tốt nhất. Hãy để mắt đến những phương pháp này khi chúng bắt đầu xuất hiện
Trong thực tế
Với sự hiểu biết chắc chắn về các bố cục có thể tái sử dụng, đã đến lúc triển khai một bố cục trên trang web Hội nghị Phong cách của chúng tôi
Đối với trang web Styles Conference, chúng tôi sẽ tạo bố cục ba cột có thể tái sử dụng bằng cách sử dụng các phần tử khối nội tuyến. Chúng tôi sẽ làm như vậy theo cách cho phép chúng tôi có ba cột có chiều rộng bằng nhau hoặc hai cột có tổng chiều rộng được phân chia giữa chúng, hai phần ba ở cột này và một phần ba ở cột kia
Để bắt đầu, chúng ta sẽ tạo các lớp xác định 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
29 của các cột này. Hai lớp chúng tôi sẽ tạo là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
521, cho một phần ba và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
522, cho hai phần ba. Trong phần lưới của tệp img {
  float: left;
}
51 của chúng tôi, hãy tiếp tục và xác định các lớp này và độ rộng tương ứng của chúng
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
3____239
Chúng tôi muốn cả hai cột được hiển thị dưới dạng các phần tử khối nội tuyến. Chúng tôi cũng cần đảm bảo rằng căn chỉnh dọc của chúng cũng được đặt thành 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
524 của mỗi cột
Hãy tạo hai bộ chọn mới sẽ chia sẻ kiểu thuộc tính hiển thị và căn chỉnh dọc
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
2____241Nhìn lại CSS, chúng tôi đã tạo hai bộ chọn lớp, 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
521 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
522, được phân tách bằng dấu phẩy. Dấu phẩy ở cuối bộ chọn đầu tiên biểu thị rằng một bộ chọn khác sẽ theo sau. Bộ chọn thứ hai được theo sau bởi dấu ngoặc nhọn mở, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
527, biểu thị rằng các khai báo kiểu sẽ tuân theo. Bằng cách phân tách các bộ chọn bằng dấu phẩy, chúng ta có thể liên kết các kiểu giống nhau với nhiều bộ chọn cùng một lúc
Chúng tôi sẽ muốn đặt một số khoảng trống ở giữa mỗi cột để giúp chia nhỏ nội dung. Chúng ta có thể thực hiện điều này bằng cách đặt 
img {
  float: left;
}
18 nằm ngang trên mỗi cột
Điều này hoạt động tốt; . Để cân bằng điều này, chúng tôi sẽ đặt tất cả các cột của chúng tôi trong một lưới và thêm cùng một phần đệm từ các cột của chúng tôi vào lưới đó
Hãy sử dụng tên lớp là 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
529 để xác định lưới của chúng ta, sau đó hãy xác định cùng một chiều ngang img {
  float: left;
}
18 cho lưới của chúng ta, các lớp section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
521 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
522. Với dấu phẩy ngăn cách bộ chọn của chúng tôi một lần nữa, CSS của chúng tôi trông như thế này
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
3____243
Khi chúng tôi thiết lập 
img {
  float: left;
}
18 nằm ngang, chúng tôi sẽ cần phải cẩn thận. Hãy nhớ rằng, trong bài học trước, chúng ta đã tạo một phần tử vùng chứa, được gọi là lớp section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
534, để căn giữa tất cả nội dung của chúng ta trên một trang trong một phần tử có chiều rộng section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
535 pixel. Hiện tại, nếu chúng ta đặt một phần tử có lớp section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
529 bên trong một phần tử có lớp section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
534, các phần đệm ngang của chúng sẽ thêm vào nhau và các cột của chúng ta sẽ xuất hiện không tương xứng với chiều rộng của phần còn lại của trang
Chúng tôi không muốn điều này xảy ra, vì vậy, thay vào đó, chúng tôi sẽ phải chia sẻ một số kiểu từ bộ quy tắc 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
534 với bộ quy tắc section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
529. Cụ thể, chúng tôi sẽ cần chia sẻ thuộc tính và giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
29 (để đảm bảo trang của chúng tôi cố định ở chiều rộng section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
535 pixel) và thuộc tính và giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
60 (để căn giữa bất kỳ phần tử nào có loại lưới trên trang)
Chúng tôi sẽ thực hiện điều này bằng cách chia nhỏ bộ quy tắc 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
534 cũ thành các quy tắc sau
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
56____245Bây giờ, bất kỳ phần tử nào có lớp 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
534 hoặc lưới sẽ rộng section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
535 pixel và được căn giữa trên trang. Ngoài ra, chúng tôi đã giữ nguyên phần đệm ngang hiện có cho bất kỳ phần tử nào có lớp section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
534 bằng cách di chuyển phần tử đó vào một bộ quy tắc mới, riêng biệt
Được rồi—tất cả công việc nặng nhọc cần thiết để đưa các kiểu lưới có thể tái sử dụng của chúng ta vào vị trí đã hoàn tất. Bây giờ là lúc làm việc với HTML của chúng ta và để xem các lớp này hoạt động như thế nào
Chúng tôi sẽ bắt đầu với các đoạn giới thiệu trên trang chủ, trong tệp 
img {
  float: left;
}
93 của chúng tôi, sắp xếp chúng thành ba cột. Hiện tại, các đoạn giới thiệu được bao bọc trong phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 với lớp section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
534. Chúng tôi muốn thay đổi lớp đó từ section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
534 thành section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
529 để chúng tôi có thể bắt đầu đặt các cột bên trong nó
1
2
3
4
____247
Tiếp theo, chúng tôi sẽ muốn thêm một lớp 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
521 vào mỗi phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 trong phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 với lớp section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
529
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
48section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
49
Và cuối cùng, vì mỗi cột của chúng ta là một phần tử khối nội tuyến, nên chúng ta sẽ muốn đảm bảo rằng chúng ta xóa khoảng trắng trống giữa chúng. Chúng tôi sẽ sử dụng các nhận xét để thực hiện việc này và chúng tôi sẽ thêm một chút tài liệu lưu ý từng phần sắp tới trong khi chúng tôi đang thực hiện để tổ chức mã của mình tốt hơn
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
90section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
91Để xem xét, trên dòng 3, chúng tôi để lại nhận xét xác định phần “Loa” để theo dõi. Ở cuối dòng 7, chúng tôi mở một bình luận ngay sau thẻ đóng 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
556. Trong nhận xét đó, trên dòng 9, chúng tôi xác định phần “Lịch trình” sẽ đến. Sau đó, chúng tôi đóng nhận xét ở đầu dòng 11, ngay trước thẻ mở đầu section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9. Cấu trúc bình luận tương tự này xuất hiện lại trên các dòng từ 13 đến 17 giữa hai phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9, ngay trước phần “Địa điểm”. Nói chung, chúng tôi đã nhận xét bất kỳ khoảng trắng tiềm năng nào giữa các cột đồng thời sử dụng các nhận xét đó để xác định các phần của chúng tôi
Bây giờ chúng ta có một lưới ba cột có thể tái sử dụng, hỗ trợ nhiều cách sắp xếp, sử dụng cả hai cột có chiều rộng một phần ba và hai phần ba. Trang chủ của chúng tôi hiện có ba cột, chia nhỏ tất cả các đoạn giới thiệu khác nhau
Hình 5Trang chủ Hội nghị Phong cách của chúng tôi hiện bao gồm bố cục ba cột
Demo và mã nguồn
Bên dưới, bạn có thể xem trang web Styles Conference ở trạng thái hiện tại, cũng như tải xuống mã nguồn cho trang web ở trạng thái hiện tại
Xem Trang web Styles Conference  hoặc Tải xuống Mã nguồn  (Tệp zip)
Các yếu tố định vị độc đáo
Thỉnh thoảng chúng ta sẽ muốn định vị chính xác một phần tử, nhưng các phần tử float hoặc inline-block sẽ không làm được điều đó. Phao, loại bỏ một phần tử khỏi luồng của trang, thường tạo ra các kết quả không mong muốn khi các phần tử xung quanh chảy xung quanh phần tử nổi. Các phần tử khối nội tuyến, trừ khi chúng ta đang tạo cột, có thể khá khó để vào đúng vị trí. Đối với những tình huống này, chúng ta có thể sử dụng thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
559 liên quan đến thuộc tính bù hộp
Thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
559 xác định cách một phần tử được định vị trên trang và liệu phần tử đó có xuất hiện trong quy trình thông thường của tài liệu hay không. Điều này được sử dụng cùng với các thuộc tính bù hộp—_______1524, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
7, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
563 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6—xác định chính xác vị trí của một phần tử sẽ được định vị bằng cách di chuyển các phần tử theo một số hướng khác nhau
Theo mặc định, mọi phần tử đều có giá trị 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
559 là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
566, có nghĩa là nó tồn tại trong luồng thông thường của tài liệu và nó không chấp nhận bất kỳ thuộc tính bù hộp nào. Giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
566 thường được ghi đè bằng giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
568 hoặc section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
569, chúng tôi sẽ kiểm tra giá trị này trong phần tiếp theo
Định vị tương đối
Giá trị 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
568 cho thuộc tính section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
559 cho phép các phần tử xuất hiện trong luồng bình thường của một trang, để lại khoảng trống cho một phần tử như dự định trong khi không cho phép các phần tử khác chạy xung quanh nó; . Ví dụ: hãy xem xét HTML và CSS sau
HTML1
2
3
4
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
93 CSSsection {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
56section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
95
Trình diễn định vị tương đối
Xem Định vị Tương đối Bút của Shay Howe (@shayhowe) trên CodePen
Ở đây, phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
572 thứ hai, phần tử có lớp section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
573, có giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
559 là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
568 và hai thuộc tính bù hộp, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
524. Điều này giữ nguyên vị trí ban đầu của phần tử và các phần tử khác không được phép di chuyển vào không gian này. Ngoài ra, các thuộc tính bù hộp đặt lại vị trí của phần tử, đẩy nó section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
578 pixel từ section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
578 pixel từ section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
524 của vị trí ban đầu
Với các phần tử được định vị tương đối, điều quan trọng cần biết là các thuộc tính bù hộp xác định nơi một phần tử sẽ được di chuyển từ vị trí ban đầu của nó. Do đó, thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
6 có giá trị là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
578 pixel sẽ thực sự đẩy phần tử về phía bên phải, từ bên trái, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
578 pixel. Sau đó, thuộc tính section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
524 có giá trị là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
578 pixel sẽ đẩy một phần tử xuống dưới cùng, từ trên xuống, section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
578 pixel
Khi chúng ta định vị phần tử bằng cách sử dụng thuộc tính bù hộp, phần tử sẽ chồng lên phần tử bên dưới nó thay vì di chuyển phần tử đó xuống dưới như thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
60 hoặc img {
  float: left;
}
18 sẽ
định vị tuyệt đối
Giá trị 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
569 cho thuộc tính section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
559 khác với giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
568 ở chỗ một phần tử có giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
559 là section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
569 sẽ không xuất hiện trong luồng thông thường của tài liệu và không gian và vị trí ban đầu của phần tử được định vị tuyệt đối sẽ không được bảo toàn
Ngoài ra, các phần tử được định vị tuyệt đối được di chuyển liên quan đến phần tử cha được định vị tương đối gần nhất của chúng. Nếu phần tử cha được định vị tương đối không tồn tại, phần tử được định vị tuyệt đối sẽ được định vị liên quan đến phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
22. Đó là khá nhiều thông tin; 
HTML1
2
3
4
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
97 CSSsection {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
98section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
99
Trình diễn định vị tuyệt đối
Xem Định vị bút tuyệt đối của Shay Howe (@shayhowe) trên CodePen
Trong ví dụ này, phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 được định vị tương đối nhưng không bao gồm bất kỳ thuộc tính bù hộp nào. Do đó vị trí của nó không thay đổi. Phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
572 với lớp section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
573 bao gồm giá trị section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
559 của section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
569. Vì phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9 là phần tử cha có vị trí tương đối gần nhất với phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
572, nên phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
572 sẽ được định vị liên quan đến phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9
Với các phần tử được định vị tương đối, các thuộc tính bù hộp xác định hướng mà một phần tử sẽ được di chuyển so với chính nó. Với các phần tử được định vị tuyệt đối, các thuộc tính bù hộp xác định hướng mà một phần tử sẽ được di chuyển so với phần tử cha được định vị tương đối gần nhất của nó
Là kết quả của các thuộc tính offset hộp 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
7 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
524, phần tử section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
572 sẽ xuất hiện các pixel section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
578 từ section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
7 và section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
578 pixel từ section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
524 của section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
9
Bởi vì phần tử 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
572 được định vị tuyệt đối, nên nó không nằm trong luồng bình thường của trang và sẽ chồng lên mọi phần tử xung quanh. Ngoài ra, vị trí ban đầu của section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
572 không được giữ nguyên và các phần tử khác có thể chiếm không gian đó
Thông thường, hầu hết các định vị có thể được xử lý mà không cần sử dụng thuộc tính 
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}
559 và thuộc tính bù hộp, nhưng trong một số trường hợp nhất định, chúng có thể cực kỳ hữu ích
Tóm lược
Học cách định vị nội dung trong HTML và CSS là một bước tiến lớn để thành thạo hai ngôn ngữ này. Thêm vào đó mô hình hộp và chúng tôi đang trên đường trở thành nhà phát triển giao diện người dùng