扩展盒子的高度

最新推荐文章于 2020-06-15 17:47:15 发布

kilimanjar0

最新推荐文章于 2020-06-15 17:47:15 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：扩展 border float class div html

本文链接：https://blog.youkuaiyun.com/kilimanjar0/article/details/6633244

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个包含三个子盒子的父盒子布局案例，通过使用 CSS 的 float 属性让子盒子脱离标准文档流，并实现左右浮动布局。同时展示了如何通过 clearfix 技巧解决父元素塌陷的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三个盒子都不在标准流中，div是没有高度的。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float属性</title>
<style type="text/css">
</head>
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">
Box-3
<br>
Box-3
<br>
Box-3
<br>
Box-3
</div>
<div class="clear"></div>
</div>
</body>
</html>

body {
    font-family: Arial;
    font-size: 12px;
    margin: 15px;
}
.father {
    background-color: #FFFF99;
    border: 1px solid #111111;
    padding: 5px;
}
.father div {
    background-color: #90BAFF;
    border: 1px dashed #111111;
    margin: 15px;
    padding: 10px;
}
.father p {
    background-color: #FF90BA;
    border: 1px dashed #111111;
    clear: right;
}
.son1 {
    float: left;
}
.son2 {
    float: left;
}
.son3 {
    float: right;
}
.father .clear {
    border: 0 none;
    clear: both;
    margin: 0;
    padding: 0;
}

下面是CSS：

.son1 {float:left;}

.son2 { float: left;}

.son3 { float: right;}

.father .clear { border: 0 none; clear: both; margin: 0; padding: 0;}