Để tạo bố cục float (floating layout) trong HTML, dùng CSS float. Website thường có nhiều cột để hiển thị nội dung. CSS Float là một trong các cách tạo bố cục đa cột truyền thống.
Bố cục float thường dùng cho layout website. Thực hiện bằng thuộc tính CSS float.
Dưới đây là bố cục float bạn có thể tạo:
Ví dụ
Chạy mã sau để tạo bố cục float trong HTML:
<!DOCTYPE html> <html> <head> <style> div.mycontent { width: 100%; border: 1px solid green; } header, footer { padding: 1em; color: green; background-color: #FAFAFA; text-align: left; } nav { float: left; max-width: 150px; padding: 1em; } nav ul { list-style-type: none; padding: 0; } article { margin-left: 10px; border-left: 1px solid gray; padding: 1em; overflow: hidden; } </style> </head> <body> <div class="mycontent"> <header> <h1>Tutorialspoint.com</h1> <h3>Simply Easy Learning</h3> </header> <nav> <ul> <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li> <li><a href="/videotutorials/index.htm">Video Tutorials</a></li> <li><a href="/codingground.htm">Coding Ground</a></li> <li><a href="/tutor_connect/index.php">Tutor Connect</a></li> <li><a href="/online_dev_tools.htm">Tools</a></li> </ul> </nav> <article> <h1>About Us</h1> <p>This is demo content.</p> <p>This is demo content.</p> <p>This is demo content.</p> <p>This is demo content.</p> </article> <footer>Add the footer content here</footer> </div> </body> </html>