Libra11#vuepress_theme_libra#CSS三栏布局1

--- title: CSS三栏布局 category: css desc: 最简单、最全面的CSS三栏布局 tag: - css picture: https://libra321.oss-cn-huhehaote.aliyuncs.com/blog/34C75FB4-EF1A-4D2F-937A-4B6A66F231D5.png date: "2020-11-12" --- # CSS 三栏布局 > 代码中 div 都没有设置高度，使用时请自行设置高度 ## 浮动+margin ```html ``` ```css .left { float: left; width: 200px; background-color: red; } .right { width: 200px; background-color: blue; float: right; } .main { margin-left: 200px; margin-right: 200px; background-color: green; } ``` ## 浮动+BFC ```html ``` ```css .left { float: left; width: 200px; background-color: red; } .right { width: 200px; background-color: b