float

xiaoxiao2021-02-28  99

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         div{             width: 400px;             border: 1px solid red;             /*float: left;*/         }         .p1{             width: 150px;             height: 200px;             background: blue;             /*float: left;*/         }         .p2{             width: 200px;             height:300px;             background: palegreen;             float: right;         }     </style> </head> <body>

1.什么叫做flaot? 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或者 是另外一个浮动元素的浮动框为止 2.float语法: float:left|right|none|inherit left:元素向左浮动 right:元素向右浮动 none:元素不浮动(默认值) inherit:从父级继承float属性 3.float的特性: 1.支持CSS所有样式 2.内容撑开宽度 3.排在一排 4.脱离文档流 注意:不管什么性质的标签,如果设置了float属性后,该元素 就会变成了具有inline-block属性的元素

<div>     <p class="p1"></p>     <p class="p2"></p> </div> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-60350.html

最新回复(0)