Html 让两个div伸展以始终填充包装div的宽度

我已经搜索了这个，并阅读了有关浮动的内容，但我不明白为什么我不能让两个div在一个包装div中相等地浮动

#换行{
边框：1px纯红；
高度：200px；
宽度：100%；
}
#gr1{
边框：1px纯蓝色；
浮动：左；
}
#gr2{
边框：1px纯蓝色；
浮动：左；
}

第一组
第2组

#换行{
边框：1px纯红；
高度：200px；
宽度：100%；
}
#gr1{
边框：1px纯蓝色；
浮动：左；
}
#gr2{
边框：1px纯蓝色；
浮动：左；
}
#gr1，#gr2{
宽度：50%；
框大小：边框框
}

第一组
第2组

#换行{
边框：1px纯红；
高度：200px；
宽度：100%；
}
#gr1{
边框：1px纯蓝色；
浮动：左；
}
#gr2{
边框：1px纯蓝色；
浮动：左；
}
#gr1，#gr2{
宽度：50%；
框大小：边框框
}

第一组
第2组

默认情况下，设置元素的大小不包括任何边框或填充，这就是为什么您的50%大小不起作用-边框会在每个元素的大小上额外增加2个像素

使用“框大小”属性可以更改此行为，使大小包括边框和填充。例如：

#换行{
边框：1px纯红；
高度：200px；
宽度：100%；
}
#gr1{
宽度：50%；
框大小：边框框；
边框：1px纯蓝色；
浮动：左；
}
#gr2{
宽度：50%；
框大小：边框框；
边框：1px纯蓝色；
浮动：左；
}

第一组
第2组

默认情况下，设置元素的大小不包括任何边框或填充，这就是为什么您的50%大小不起作用-边框会在每个元素的大小上额外增加2个像素

使用“框大小”属性可以更改此行为，使大小包括边框和填充。例如：

#换行{
边框：1px纯红；
高度：200px；
宽度：100%；
}
#gr1{
宽度：50%；
框大小：边框框；
边框：1px纯蓝色；
浮动：左；
}
#gr2{
宽度：50%；
框大小：边框框；
边框：1px纯蓝色；
浮动：左；
}

第一组
第2组

很好的解释。。那解释得很有道理。。这让老师很乐意帮忙。：）你可以在这里了解更多关于这处房产及其价值的信息：我很乐意帮忙。：）您可以在此处了解有关此属性及其值的更多信息：