Div浮动换换行之后的宽度问题

Question

场景：

<div class='parent'>
    ## .child{ float: left; width:50%; box-sizing : border-size; }
    <div class="child"></div>
    <div class="child"></div>
</div> 

问题

1. 当div.parent 宽度变小的时候(比如切换到小屏幕)，第二个div.child会浮动到第二行，由于之前 .child宽度是50%，请问换行之后怎么能自动百分百宽度呢？？？？

2. 反正问题就是左浮动的元素，如果有一个被挤换行了，怎么让那个元素的宽度等于父级容器的宽度？

Answer 1

先f12检查下盒模型，再检查子元素有没有border，若必须有border，设置子元素box-sizing为border-box。或者再看看你的子元素，是不是行元素，如果是，两个子元素间不要有空格或者换行，写一行上试试。好像哪种情况下空格换行会占掉一点宽度

Answer 2

父级缩小导致换行，我猜测是因为你的父级的50%小于了里面内容的宽度，所以换行了，你这种问题我建议用flex去布局，flex-wrap设置为wrap，然后给子项目设置一个flex-basic或者直接设置一个宽度，这样应该就能实现你想要的效果

Answer 3

用媒体查询啊，比如：
@media screen (max-width:320px){

.chlid{
    width:100%;
}

}
这样的话，在某一分辨率的屏幕小 子集不就是百分百了吗？