关于flex布局的详细介绍和使用可以阅读这一篇文章(别人写的,优秀的东西就值得学习):juejin.im/post/686691… 本篇聊一下flex布局和float冲突的问题:
1.当父容器设置为弹性盒子之后(设置了display:flex;),父容器中的子元素想要设置float:right or float:left是不可能生效的;此外,clear属性也不会生效;css3书本上的原话:float和clear属性对弹性元素不起作用,不会把弹性元素移出文档流.其实,应用到弹性元素上的float和clear属性将被忽略(然而,float属性对框体的生成仍有影响,因为display属性的计算值受它影响).
2.一个元素设置了float:right or float:left,父容器没有设置为弹性盒子,而爷爷辈容器设置为了弹性盒子,那么该子元素的float属性是有效的,即:float属性是否生效与直接父级元素是不是弹性盒子有关,与其他辈的父容器无关;
例子:
html:
.box
.box1
.left-box
.right-box
.box2
.left-box
.right-box
css:
.box{
display: flex;
flex-direction: column;
align-items: center;
.box1{
width: 95%;
display: flex;
.left-box{
width: 60%;
height: 100px;
background-color: #31cc44;
}
.right-box{
width: 30%;
height: 100px;
background-color: #205827;
}
}
.box2{
width: 90%;
.left-box{
width: 60%;
height: 100px;
background-color: #e1ee2c;
display: inline-block;
}
.right-box{
display: inline-block;
float: right;
width:30%;
height: 100px;
background-color: #bebc0c;
}
}
}
css:
效果:
