- Mastering CSS
- Rich Finelli
- 135字
- 2021-07-08 09:45:59
The float method
We can prevent elements from collapsing by floating the container to the left or to the right. Let's do this; let's add float: left or float: right to our secondary-section. Either will work:
.secondary-section { margin-bottom: 50px; background-color: #7EEEAF; float: left; }
Once we save this, we will see that we have the green background, so the collapse is no longer taking place, but the obvious problem is we've floated to the left. We wanted this div to be centered:

This method has an obvious drawback. There are some circumstances and some situations where it would be a perfect solution, but in this one, there's an obvious problem: we are no longer centered. Remove float: left from your CSS and explore my favorite, and I think the best, solution: the clearfix hack.
推薦閱讀
- Go Web編程
- Facebook Application Development with Graph API Cookbook
- Modular Programming with Python
- 技術領導力:程序員如何才能帶團隊
- 編程珠璣(續)
- Django Design Patterns and Best Practices
- Hands-On RESTful Web Services with Go
- Oracle Database 12c Security Cookbook
- Mastering Python Networking
- 高級語言程序設計(C語言版):基于計算思維能力培養
- 前端HTML+CSS修煉之道(視頻同步+直播)
- C++寶典
- Apache Solr PHP Integration
- Web開發新體驗
- JavaScript編程精解(原書第3版)