左浮動如何用css實現(xiàn)

這篇文章主要介紹了左浮動如何用css實現(xiàn)，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

Css樣式的float浮動屬性，用于設置標簽對象（如：<div>標簽盒子、<span>標簽、<a>標簽、<em>標簽等html標簽）的浮動布局，浮動也就是我們所說標簽對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。

float是什么意思？

float是浮動，翻譯成中文也是浮動意思。

float的作用

通過css定義float（浮動）讓div樣式層塊，向左或向右（靠）浮動。

Float常跟屬性值left、right、none

Float:none 不使用浮動

Float:left 靠左浮動

Float:right 靠右浮動

float語法：

float : none | left |right

參數(shù)值：

none : 　對象不浮動

left : 　對象浮在左邊

right : 　對象浮在右邊

案例：

我們設置一個盒子里，一個靠右、一個靠左浮動2個盒子，為了直觀看到css浮動布局效果，我們對兩個盒子設置一定寬度、高度和邊框。

1、主要的html代碼片段：

<div class="divcss5"> 
    <div class="divcss5_left">布局靠左浮動</div> 
    <div class="divcss5_right">布局靠右浮動</div> 
    <div class="clear"></div><!-- html注釋：清除float產(chǎn)生浮動 --> 
</div>

2、css代碼片段：
.divcss5{ width:400px;padding:10px;border:1px solid #F00} 
.divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} 
.divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} 
.clear{ clear:both}

感謝你能夠認真閱讀完這篇文章，希望小編分享左浮動如何用css實現(xiàn)內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!