css三列布局-float

冫水阔落

于 2022-03-26 19:28:11 发布

阅读量335

点赞数

文章标签： css

本文链接：https://blog.csdn.net/HAINIHAOya/article/details/123761735

版权

css三列布局-float

使用浮动实现三列布局的注意点是浮动元素需要写在内容元素之前，否则布局是混乱的。这种方式实现三列布局是优点是简单、兼容性好，但缺点是需要清除浮动，否则父盒子的高度无法撑开，可能会导致其他页面元素的布局混乱。
首先给类名为"container"的盒子添加"overflow: hidden"属性，该属性可以使盒子成为BFC，处理浮动元素父盒子高度塌陷的问题。再给类名为"left"的盒子添加"float: left"和"width: 100px"两条属性，首先往左浮动，宽度这里设置100px。继续给类名为"right"的盒子添加"float: right"和"width: 100px"两条属性，往右浮动。最后给类名为"center"的盒子设置外边距"margin: 0px 100px"，该属性上下外边距为0px，左右外边距为两边浮动元素的宽度100px，这样保证了中间的内容区域不会被两边的浮动元素覆盖住。注意，HTML文档中两个浮动元素的顺序在内容元素之前。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                border: 1px solid black;
                overflow:hidden;
            }
            .left {
                border: 1px solid black;
                float:left;
                width:100px;
            }
            .right {
                border: 1px solid black;
                float:right;
                width:100px;
            }
            .center{
                margin:0 100px;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
            <article class="center"></article>
        </section>
    </body>
</html>

冫水阔落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css三列布局-float

css三列布局-float使用浮动实现三列布局的注意点是浮动元素需要写在内容元素之前，否则布局是混乱的。这种方式实现三列布局是优点是简单、兼容性好，但缺点是需要清除浮动，否则父盒子的高度无法撑开，可能会导致其他页面元素的布局混乱。首先给类名为"container"的盒子添加"overflow: hidden"属性，该属性可以使盒子成为BFC，处理浮动元素父盒子高度塌陷的问题。再给类名为"left"的盒子添加"float: left"和"width: 100px"两条属性，首先往左浮动，宽度这里设置1
复制链接

扫一扫