Html 将外部嵌套div扩展到100%

我有这个密码

.outer{
背景色：#ff00ff；
宽度：100%；
}
.外分区{
浮动：左；
背景色：#0000ff；
}

测试1
测试1
测试2
测试2

使用

clearfix

.outer{
背景色：#ff00ff；
宽度：100%；
}
.外分区{
浮动：左；
背景色：#0000ff；
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}

测试1
测试1
测试2
测试2

使用

clearfix

.outer{
背景色：#ff00ff；
宽度：100%；
}
.外分区{
浮动：左；
背景色：#0000ff；
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}

测试1
测试1
测试2
测试2

.outer

已具有100%的宽度，因为它是块元素。它缺少高度，因为内容是浮动的。要为

.outer

提供内容的高度，请在类定义中添加

overflow:auto

：

.outer{
背景色：#ff00ff；
溢出：自动；
}
.外分区{
浮动：左；
背景色：#0000ff；
}

测试1
测试1
测试2
测试2

.outer

已具有100%的宽度，因为它是块元素。它缺少高度，因为内容是浮动的。要为

.outer

提供内容的高度，请在类定义中添加

overflow:auto

：

.outer{
背景色：#ff00ff；
溢出：自动；
}
.外分区{
浮动：左；
背景色：#0000ff；
}

测试1
测试1
测试2
测试2

使用

溢出：自动


.outer{
背景色：#ff00ff；
宽度：100%；
溢出：自动；
}
.外分区{
浮动：左；
背景色：#0000ff；
}

测试1
测试1
测试2
测试2
使用
溢出：自动


.outer{
背景色：#ff00ff；
宽度：100%；
溢出：自动；
}
.外分区{
浮动：左；
背景色：#0000ff；
}

测试1
测试1
测试2
测试2

方法1：使用



.outer{
背景色：#ff00ff；
宽度：100%；
}
.外分区{
浮动：左；
背景色：#0000ff；
}

测试1
测试1
测试2
测试2



方法1：使用



.outer{
背景色：#ff00ff；
宽度：100%；
}
.外分区{
浮动：左；
背景色：#0000ff；
}

测试1
测试1
测试2
测试2


解决这个问题有两个方面：

使用clear属性，无论是添加到.outer类之后还是添加一个实div作为最后一个.outer容器元素都可以

.outer{
背景色：#ff00ff；
宽度：100%；
}
.外：之后{
显示：块；
内容：“；
明确：两者皆有；
}
.外分区{
浮动：左；
背景色：#0000ff；
}

测试1

测试1

测试1
测试2

测试2

测试2
解决这个问题有两个方面：

使用clear属性，无论是添加到.outer类之后还是添加一个实div作为最后一个.outer容器元素都可以

.outer{
背景色：#ff00ff；
宽度：100%；
}
.外：之后{
显示：块；
内容：“；
明确：两者皆有；
}
.外分区{
浮动：左；
背景色：#0000ff；
}

测试1

测试1

测试1
测试2

测试2

测试2
由于.outer的所有内容都是浮动的，因此它们将从文档流中删除。因此，.outer为空且未显示。@Gerard感谢您的解释，他不知道，因为.outer的所有内容都是浮动的，所以它们将从文档流中删除。结果，.outer是空的，没有显示。@Gerard谢谢你的解释，我不知道that@Toshi我的回答类似，您可以查看更多详细信息更好的选项？
溢出：自动
不清除floats@Toshi回答类似，您可以查看更多详细信息。不是
溢出：自动更好的选项？
溢出：自动
不清除浮动