弹性盒模型(1)------Flex布局对子元素影响
程序员文章站
2022-07-09 21:07:57
...
【前言】
总结讲解下弹性盒模型布局相关知识点,为以后课件做备录。本文简单讲解下Flex布局对子元素影响
【主体】
设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style type="text/css"> *{ margin: 0; padding: 0; } .main_area{ width: 600px; height: auto; border: 1px solid red; margin: 100px auto; display: flex; display: -webkit-flex; /* Safari */ } .main_area div{ width: 200px; height: 300px; } .main_area div:nth-of-type(1){ float: right; background: red; } .main_area div:nth-of-type(2){ background: green; } .main_area div:nth-of-type(3){ background: blue; } </style> </head> <body> <div class="main_area"> <div></div> <div></div> <div></div> </div> </body> </html>
测试后将第一个div右浮,会发现无效(弹性盒子元素无法浮动)。
.