CSS div布局 常见问题1 换行
https://www.xiaobuteach.com/html/layout-faq/faq1.html?from=bili
CSS div布局 常见问题1 换行
1 原计划目标
外部div1宽度300px；
内部3个子div：通过float:left设置成3列；每个宽度100px。
2 实际结果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>html 布局问题 | 小步教程</title>
<style>
#div1{
width: 300px;
}
#div1::after{
content: '';
display: block;
clear: both;
}
#div1>div{
float: left;
width:100px;
height: 50px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<div id="div1">
<div >第1列</div>
<div >第2列</div>
<div >第3列</div>
</div>
</body>
</html>
下拉查看答案。
3 分析
盒子模型的box-sizing属性的默认值：content-box，表示width是内容宽度，而不是总宽度。
3个子div的完整宽度：内容宽度100px+左右边框宽度2px=102px。
而外层div的内容宽度：300px，只够放两个子div。
即：元素总宽度计算问题引起的换行。
4 解决方法1
将外层div的宽度改为306px。刚好容纳。
#div1{
width: 306px;
}
F12查看盒子模型
这个解决方法的缺点：还要算宽高，而且算出来是零碎值，累。
5 解决方法2
将所有元素的box-sizing改整成border-box，表示width是总宽度。
*{
box-sizing: border-box;
}
#div1{
width: 300px;
}
F12查看盒子模型
