- float:left 元素向左浮動
效果圖
1.png
源代碼
css
.left{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
html
<body>
<div class="warp">
<div class="left"></div>
</div>
</body>
- float:right 元素向右浮動
效果圖
2.png
源代碼
css
.right{
float: right;
width: 200px;
height: 200px;
background-color: purple;
}
html
<body>
<div class="warp">
<div class="right"></div>
</div>
</body>
- float:none 默認值产雹。元素不浮動徒爹，安裝正常的文檔流排列方式
效果圖
3.png
源代碼
css
.left{
float: none;
width: 200px;
height: 200px;
background-color: orange;
}
.right{
float: none;
width: 200px;
height: 200px;
background-color: purple;
}
html
<body>
<div class="warp">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
- float:inherit 規(guī)定應(yīng)該從父元素繼承float屬性的值
效果圖
4.png
源代碼
css
.warp{
float:left;
}
.left{
float: inherit;
width: 200px;
height: 200px;
background-color: orange;
}
.right{
float: inherit;
width: 200px;
height: 200px;
background-color: purple;
}
html
<body>
<div class="warp">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
