Điều này khiến văn bản của bạn chồng lên nhau ở độ phân giải thấp hơn. Vui lòng áp dụng css thích hợp ở đây và xóa vị trí tuyệt đối. Nó sẽ hoạt động sau đó
Gợi ý. Thay đổi thành css sang một bên
aside{
float: right;
max-width: 100%;
width: 500px;
}Thêm giải pháp của bạn ở đây
B I U S small BIG code var & link [^] encode untab case indent outdent
Xem trước 0
thành viên hiện có
hoặc tham gia với chúng tôi
Tải xuống, Bình chọn, Nhận xét, Xuất bản
Email của bạnEmail này đang được sử dụng. Bạn có cần mật khẩu của bạn?
Mật khẩu tùy chọnKhi trả lời câu hỏi, vui lòng.
- Đọc kỹ câu hỏi.
- Hiểu rằng tiếng Anh không phải là ngôn ngữ đầu tiên của mọi người, vì vậy hãy khoan dung với lỗi chính tả và ngữ pháp
- Nếu một câu hỏi được diễn đạt kém thì hãy yêu cầu làm rõ, bỏ qua nó hoặc chỉnh sửa câu hỏi và khắc phục sự cố. Xúc phạm không được chào đón
- Đừng bảo ai đó đọc hướng dẫn. Rất có thể họ có và không nhận được. Đưa ra câu trả lời hoặc chuyển sang câu hỏi tiếp theo
Nội dung này, cùng với bất kỳ tệp và mã nguồn liên quan nào, được cấp phép theo Giấy phép Mở Dự án Code [CPOL]
Thuộc tính rõ ràng CSS bảo vệ một phần tử bị chồng lấp bởi một phần tử khác. Giả sử bạn có một phần tử nổi div đang nổi và chồng lên một phần tử không nổi khác; . Thuộc tính này di chuyển xuống phần tử không nổi để tránh trùng lặp. Thuộc tính rõ ràng có thể được áp dụng cho các phần tử nổi và không nổi
Thuộc tính clear của CSS giúp chúng ta căn chỉnh trang. Khi bạn có nhiều phần tử nổi và không nổi trên cùng một trang, tất cả các phần tử nổi bắt đầu nổi và chồng lấp các phần tử không nổi. Việc đặt các phần tử vào vị trí lý tưởng của chúng trở nên khó khăn và trang trông lộn xộn và kém hấp dẫn. Thuộc tính CSS rõ ràng rất hữu ích để tùy chỉnh các trang trong những trường hợp như vậy
Khi thuộc tính này được áp dụng cho các phần tử không nổi, nó sẽ di chuyển xuống cạnh viền của phần tử cho đến khi lề trên của nó được lưu từ cạnh lề của các phần tử nổi. Nếu có hai phần tử nổi, lề dọc của cả hai sẽ không bị ảnh hưởng. Nhưng vị trí của các phần tử nổi sau này sẽ bị ảnh hưởng
Xóa giá trị tài sản. Trái, Phải, Cả hai
CSS cung cấp các giá trị khác nhau để sử dụng cho thuộc tính rõ ràng CSS. Bạn không có thuộc tính nào, trái, phải, cả hai, khởi tạo và kế thừa để sử dụng;
- Không có
Giá trị “none” là giá trị mặc định cho thuộc tính clear của CSS. Sử dụng thuộc tính này sẽ không tạo ra bất kỳ hiệu ứng nào, vì vậy nếu có các phần tử trôi nổi trong quá khứ, phần tử sẽ không bị di chuyển khỏi vị trí của nó và phần chồng chéo sẽ vẫn ở đó.
- Ban đầu
Sử dụng từ khóa ban đầu với thuộc tính rõ ràng có nghĩa là sử dụng giá trị mặc định của thuộc tính; . Vì vậy, sử dụng từ khóa này sẽ không ảnh hưởng đến nổi. Phần tử sẽ ở vị trí ban đầu và phần tử nổi sẽ chồng lên nhau.
- Bên trái
Nếu một phần tử nổi bên trái trong quá khứ chồng lên phần tử không nổi, bạn có thể sử dụng giá trị từ khóa “left” với thuộc tính rõ ràng. Nhưng đồng thời, nếu có một phần tử nổi bên phải, nó sẽ nổi theo bản chất của nó và bạn không thể tránh khỏi sự trùng lặp bởi giá trị từ khóa “trái”.
- Đúng
Giá trị từ khóa “phải” được sử dụng với thuộc tính rõ ràng để tránh thả nổi phần tử động bên phải trong quá khứ. Nếu có phần tử thả nổi do phần tử thả nổi bên trái, thì không thể tránh được điều đó bằng cách sử dụng giá trị từ khóa “phải”.
- Cả hai
Giá trị từ khóa “cả hai” được sử dụng để css xóa cả phần nổi; . Nếu chỉ có phần tử quá khứ bên trái, phần tử quá khứ bên phải hoặc cả hai, thì giá trị này hoạt động trong cả hai điều kiện.
– Bắt đầu nội tuyến
Giá trị Từ khóa “Inline-start” được sử dụng với thuộc tính clear để di chuyển phần tử xuống để css xóa tất cả các số float đến từ . Đó sẽ là phía bên trái cho các tập lệnh từ trái sang phải và phía bên phải cho các tập lệnh từ phải sang trái.
– Inline-end
Giá trị từ khóa “inline-end” được sử dụng với thuộc tính xóa CSS để xóa phần nổi đến từ phía kết thúc của phần chứa . Điều đó sẽ phù hợp với các tập lệnh từ trái sang phải và bên trái cho các tập lệnh từ phải sang trái.
- Thừa kế
Khi bạn sử dụng giá trị “kế thừa” trong thuộc tính rõ ràng cho phần tử con và nếu phần tử cha cũng có thuộc tính đó, . Phần tử con sử dụng cùng một thẻ rõ ràng CSS. Khi bạn chỉ có các phần tử nổi left hoặc past right, bạn cần sử dụng giá trị từ khóa “left” hoặc “right” tương ứng và sau đó, bạn có thể sử dụng thuộc tính inherit trong mọi phần tử con.
Làm thế nào để các thuộc tính nổi và xóa thay đổi căn chỉnh?
Bây giờ chúng ta đã học được rằng nếu chúng ta có hai phần tử nổi đang nổi và bạn có một phần tử không nổi được đặt xuống và khi bạn áp dụng thuộc tính rõ ràng CSS cho phần tử không nổi đó, nó sẽ di chuyển xuống dưới. Nhưng nếu có nhiều hơn hai phần tử được đặt theo chiều dọc thì sao?
Đó là lý do tại sao sử dụng thuộc tính rõ ràng để tránh những rắc rối như vậy sẽ là một phương pháp tuyệt vời
Những cách khác ngoài tài sản rõ ràng để vượt qua sự nổi là gì?
Nếu bạn không muốn sử dụng thuộc tính rõ ràng, bạn sẽ phải xóa thuộc tính float, khiến chúng tôi phải căn chỉnh trang. Bởi vì nếu bất kỳ phần tử nào có nhiều nội dung hơn kích thước của khối chứa nó, làm thế nào nó sẽ hiển thị toàn bộ nội dung?
Ngoài ra còn có một cách khác để sửa lỗi float, đó là Clearfix mà chúng tôi sẽ đề cập ở phần sau của bài viết này
Làm cách nào để ngăn lề bị sụp đổ do phần tử nổi?
Nếu bạn có hai hoặc nhiều phần tử nổi trên đầu trang web và bạn có một phần tử nổi bên cạnh các phần tử nổi đó. Cách chung để ngăn trôi nổi là áp dụng thuộc tính rõ ràng cho chân trang đó. Thuộc tính rõ ràng đó sẽ di chuyển chân trang xuống, nhưng bạn cũng sẽ thấy sự thu gọn của lề trên cùng của chân trang và các phần tử nổi được định vị ở trên cùng
Bạn nên có một phần tử div trống khác giữa các phần tử nổi trên cùng và phần chân trang để tránh hiện tượng này bị sập. Và áp dụng thuộc tính rõ ràng với các giá trị từ khóa “cả hai” để ngăn chặn sự sụp đổ đó. Nhưng nếu bạn không muốn tạo thẻ div, bạn có thể sử dụng hack Clearfix để thay thế.
Hack Clearfix là gì?
Clearfix là một cách xóa phần tử con. Nó chủ yếu được sử dụng khi các phần tử nổi được xếp chồng lên nhau theo chiều ngang. Thuộc tính Clearfix có hiệu quả cao nếu vùng chứa bao bọc phần tử con của nó
Đôi khi chúng ta có một phần tử nổi trong một phần tử chứa và chiều cao của phần tử nổi đó lớn hơn chiều cao của phần tử chứa. Sau đó, chúng ta thấy phần tử nổi bắt đầu nổi bên ngoài vùng chứa của nó. CSS cung cấp cho bạn bản hack Clearfix để tránh việc trôi nổi như vậy, cho phép khối chứa mở rộng cho đến khi phần tử nổi vào trong vùng chứa và không bao giờ tắt
Nếu bạn đã đặt lề và phần đệm phù hợp và kiểm soát nó, lỗi tràn. tự động hoạt động tốt. Nếu không, bạn có thể có một thanh cuộn để điều khiển hình ảnh
Clearfix {tràn. Tự động;}Thuộc tính rõ ràng với các từ khóa “trái”, “phải” và “cả hai” cũng được sử dụng ở đây, tùy theo vị trí của phần tử nổi. Cách tốt hơn là sử dụng từ khóa “cả hai”
Kiểu dáng của CSS. Sử dụng thuộc tính nổi và xóa để tạo kiểu cho trang web
Nếu bạn có hình ảnh và văn bản trên trang của mình, nó sẽ hiển thị bố cục không hấp dẫn. Giả sử bạn có một đoạn văn bản, sau đó là hai hình ảnh và một đoạn văn bản nữa trên bố cục của bạn. Nếu bạn không sử dụng thuộc tính float cho bất kỳ phần tử nào, đoạn đầu tiên sẽ hiển thị trên cùng và sau đó hai hình ảnh sẽ được hiển thị bên cạnh đoạn văn. Và After hình ảnh, đoạn thứ hai sẽ được hiển thị
Bạn cần sử dụng các thuộc tính float và clear để tạo kiểu cho bố cục như vậy. Tại đây, bạn có thể thiết kế nhiều kiểu với thuộc tính float và clear
Giả sử bạn áp dụng thuộc tính float cho cả hai hình ảnh với bất kỳ giá trị nào. Trình duyệt hiển thị đoạn văn bản đầu tiên ở trên cùng, sau đó cả hai hình ảnh đó sẽ được hiển thị trên một bố cục khác tùy theo giá trị; . Phần tử nổi sẽ nổi trên lớp luồng thông thường và đoạn văn được hiển thị sau hình ảnh trong dòng sẽ được hiển thị bên dưới hình ảnh
Vì chúng tôi đã sử dụng các giá trị từ khóa “phải”, nên phía bên trái của đoạn văn bản tiếp theo, không có bất kỳ thuộc tính float nào, sẽ không được hiển thị vì văn bản thứ hai vẫn ở trong bố cục luồng bình thường. Bạn có thể thay đổi vị trí của hình ảnh bằng cách thay đổi giá trị của thuộc tính floating
Tại đây, bạn có thể xóa kiểu CSS bằng cách sử dụng thuộc tính rõ ràng cho đoạn văn bản thứ hai và di chuyển nó xuống dưới. Bạn có thể đặt cả hai hình ảnh cách xa nhau và có văn bản ở giữa chúng hoặc bạn cũng có thể đặt cả hai hình ảnh theo từng dòng và có văn bản bên cạnh những hình ảnh đó
Trên một số bố cục trang web, bạn sẽ quan sát thấy rằng hình ảnh được hiển thị ở bên phải của trang và văn bản giải thích hình ảnh đó được hiển thị ở bên trái của trang; . Để làm được điều đó, bạn cần sử dụng các giá trị khác nhau cho cả hai thuộc tính để thực hiện điều gì đó sáng tạo
Phần kết luận
Hãy xem những gì chúng ta đã học được ngày hôm nay
- Thuộc tính rõ ràng CSS được sử dụng để bảo vệ một phần tử khỏi phần tử cuối cùng
- Thuộc tính rõ ràng của CSS di chuyển phần tử xuống khi có bất kỳ phần tử nổi nào làm xáo trộn phần tử
- Bạn có thể sử dụng giá trị từ khóa “none,” “left,” “right,” “ both,” “initial,” và “inherit,” “inline-start,” “inline-end”
- Giá trị “left” di chuyển xuống phần tử để tránh quá khứ left floating
- Giá trị “phải” di chuyển xuống phần tử để tránh trôi nổi bên phải trong quá khứ
- Giá trị “cả hai” di chuyển xuống phần tử để tránh trôi nổi quá khứ đến từ hai bên
- Bạn có thể sử dụng Clearfix để cho phép vùng chứa bọc phần tử con
- Bạn có thể tạo nhiều thiết kế bố cục sáng tạo bằng cách sử dụng kết hợp các thuộc tính float và clear
5/5 - [13 phiếu]
- Tác giả
- Bài viết gần đây
Vị trí là tất cả
Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL