Điện giá trị cho thuộc tính float nếu muốn phần tử nội về phía bên phải lượng tại liệu
Show
Thuộc tính float xác định có hay không một thành phần được float (trôi nổi).
Với giá trị như sau:
Float left Float left Khi sử dụng float, thì thành phần đã rời bỏ vị trí tuyệt đối trước đó, như ta thấy ở trên.
Thuộc tính float được hỗ trợ trong đa số các trình duyệt. Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype Trong CSS có rất nhiều thuộc tính với những chức năng khác nhau. Bài viết này Bizfly Cloud sẽ giới thiệu tới bạn thuộc tính Float và Clear trong CSS. Thuộc tính FloatThuộc tính Float được sử dụng để chuyển vị trí và định dạng nội dung một phần tử, ví dụ, chuyển một hình ảnh sang góc trái hoặc phải so với chữ trong không gian bao quanh nó. Thuộc tính này rất cần thiết trong việc định dạng bố cục trang và chia bố cục HTML của một trang web. Như bạn đã biết, hiện nay việc sử dụng thẻ div hay các thẻ HTML5 bao gồm header, footer và article để bố cục trang là khá phổ biến. Tuy nhiên, theo mặc định, các phần tử HTML của trang web là không float. Để giải quyết được vấn đề trên, bạn có thể sử dụng thuộc tính Float vì Float có thể thực hiện một trong các giá trị như sau: left - Phần tử chuyển sang bên trái của container right - Phần tử chuyển sang bên phải của container none - Phần tử giữ nguyên vị trí của nó (trạng thái bình thường). Mặc định. inherit - Phần tử con kế thừa thuộc tính float của phần tử cha. Theo cách dùng đơn giản nhất, thuộc tính Float có thể được dùng để phân bổ chữ bao quanh các hình ảnh. Cú pháp chung của FloattagName { float: giá trị; } Lưu ý: Nếu một phần tử được float sang trái hoặc phải (float: left hoặc float: right) thì tất cả các thẻ cùng cấp khác theo sau nó sẽ được đẩy lên trên và lấp đầy chỗ trống của hàng chứa các thẻ đó. Ví dụ minh họa cho thuộc tính FloatĐể hiểu rõ hơn về các lệnh trong thuộc tính Float, hãy cùng xem qua các ví dụ dưới đây. Float:right - ví dụ đưa hình ảnh nổi lên ở bên phải của văn bảnimg { float: right} p{ background:#FFFACD} margin-left:15px;"> Nội dung của văn bản Float: left - ví dụ hiển thị hình ảnh ở bên trái văn bản.img { float: left} p{ background:#FFFACD} margin-left:15px;"> Nội dung của văn bản Float: none - ví dụ hiển thị hình ảnh ở vị trí mặc địnhimg { float: none} p{ background:#FFFACD} margin-left:15px;"> Nội dung của văn bản Thuộc tính ClearThuộc tính Clear gần như là ngược lại với float và giải quyết các vấn đề của Float (đã được nêu trong phần lưu ý của Float). Thuộc tính Clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B (thành phần sử dụng float). Thuộc tính Clear được sử dụng thông dụng nhất là sau khi bạn sử dụng thuộc tính Float cho một phần tử. Trong trường hợp một phần tử được float: left, thì bạn nên sử dụng clear: left. Phần tử được float sẽ tiếp tục nổi, còn những phần tử bị xóa sẽ hiển thị bên dưới phần tử đó trên trang web. Ví dụ của clear: left: div { clear: left; } ClearfixKhông có clearfix Có clearfix Phần tử được float cao hơn so với phần tử chứa nên sử dụng thuộc tính clearfix với giá trị overflow: auto để khắc phục. .clearfix { overflow: auto; }
Trịnh Quý Công @congtrinhh Đã đăng vào thg 5 1, 2020 3:23 SA 4 phút đọc Bài đăng này đã không được cập nhật trong 2 năm
Việc học HTML, CSS là những nền tảng căn bản trên con đường trở thành một Web developer chuyên nghiệp. Trong đó, việc nắm được các thuộc tính CSS cơ bản là rất quan trọng. Hôm nay, chúng ta cùng tìm hiểu về một thuộc tính rất hay dùng nhưng cũng khá trừu tượng trong CSS, đó là thuộc tính Float. Tìm hiểu
KếtThuộc tính Float được sử dụng rất nhiều trong thiết kế website, vì vậy việc làm chủ được nó sẽ trở nên rất hữu ích cho bạn đấy! All rights reserved |