1使用css中的flaot屬性就可以了，首先打開(kāi)Dreamweaver，創(chuàng)建html文件2然后先給頁(yè)面設(shè)置背景顏色，創(chuàng)建段落兩個(gè)段落，段落上面設(shè)置2張圖片的float屬性，分別讓它們左右浮動(dòng)，值為left和right，最后打開(kāi)瀏覽器3打開(kāi)瀏覽器后即可看到效果，兩張圖片分別浮動(dòng)在文本的左右兩邊，文字則是圍繞在圖片周?chē)?/p>

如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框如下圖所示，如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”CSS flo。

詳解圖片img設(shè)置的floatright靠右浮動(dòng)，p標(biāo)簽在其下面，所以要加個(gè)清楚浮動(dòng)的效果樣式中定義了clear也可以寫(xiě)成效果是一樣的圖片靠右浮動(dòng)，文字另起一行展示主要css屬性用于clearboth清除左右浮動(dòng)，both換成left清除左浮動(dòng)，right是清除右浮動(dòng)不添加就會(huì)在底層展示看著是在同一行實(shí)則不然。

在CSS中使用floatleft非常簡(jiǎn)單只需在樣式規(guī)則中為特定元素指定此屬性即可例如，如果你想讓一個(gè)圖片或段落靠左浮動(dòng)，你可以這樣寫(xiě)css imgmyImage float left 或者css pmyParagraph float left 這將使具有相應(yīng)類(lèi)名的圖片或段落向左浮動(dòng)需要注意的是，使用浮動(dòng)布局時(shí)需要謹(jǐn)慎處。

為解決此問(wèn)題，可以使用clear屬性，或者采用特定的CSS技巧，比如在浮動(dòng)元素后添加一個(gè)清除浮動(dòng)的非浮動(dòng)元素掌握浮動(dòng)的使用并非易事，但理解其原理和潛在問(wèn)題將使你成為一個(gè)更強(qiáng)大的前端開(kāi)發(fā)者記住，每一項(xiàng)CSS屬性都有其適用場(chǎng)景，正確地使用浮動(dòng)，它將成為你設(shè)計(jì)工具箱中的一把利劍。

方法一在父級(jí)div上設(shè)置 overflowhidden當(dāng)使用這個(gè)屬性時(shí)，瀏覽器會(huì)檢查浮動(dòng)元素的高度這種方法簡(jiǎn)單，代碼量少，且兼容性好，但需要確保父級(jí)div有明確的寬度或使用 zoom1，否則無(wú)法顯示超出的部分不推薦與position屬性同時(shí)使用方法二在浮動(dòng)元素的末尾添加一個(gè)空div，并設(shè)置其clear屬性為both。

在CSS中，通過(guò)為元素設(shè)置ldquofloatrdquo屬性，可以實(shí)現(xiàn)元素的浮動(dòng)這個(gè)屬性主要有四個(gè)值leftright和inherit當(dāng)元素被設(shè)置為浮動(dòng)時(shí)，它將脫離其正常的文檔流，移動(dòng)到其容器的左側(cè)或右側(cè)，直到遇到另一個(gè)浮動(dòng)元素或容器的邊緣這種布局方式常用于實(shí)現(xiàn)文字環(huán)繞圖片的效果，或者在不改變HTML。

float屬性的核心在于控制元素在頁(yè)面流中的位置，其常見(jiàn)值left和right允許元素脫離文檔流，圍繞在其父容器的左右兩側(cè)例如，通過(guò)浮動(dòng)圖片，可以輕松實(shí)現(xiàn)文本環(huán)繞效果然而，浮動(dòng)元素可能導(dǎo)致“浮動(dòng)塌陷”問(wèn)題，影響后續(xù)元素解決這一問(wèn)題的方法包括使用clearfix技術(shù)，或者轉(zhuǎn)向現(xiàn)代布局方式如Flexbox和Grid，它們。

全部設(shè)成百分比，然后，設(shè)置個(gè)最小寬度 例如div1width33% floatleft div2width33% floatleft div3width33% floatleft media minwidth768px div1width100% floatleft div2width100% floatleft div3width100% floatleft。

子元素設(shè)置100PX的寬高，然后把子元素div2左浮動(dòng)一下，代碼floatleft實(shí)現(xiàn)效果如下，DIV2在div1的左方，其它代碼不變，我們只需要把浮動(dòng)的代碼更改一下，就可以實(shí)現(xiàn)右浮動(dòng)了，floatright下圖實(shí)際效果我們可以看到DIV實(shí)現(xiàn)了右浮動(dòng)，浮動(dòng)至右邊css浮動(dòng)擴(kuò)展定義 浮動(dòng)的框可以向左或向右移動(dòng)。

從上面案例可以看出，添加了浮動(dòng)的元素會(huì)影響其后元素的布局此外由于元素脫離原來(lái)的文檔流，且父盒子沒(méi)有添加高度屬性，那么父盒子無(wú)法感知到子盒子的存在，因此父盒子不會(huì)被撐開(kāi)知道了 float 帶來(lái)的不好的地方，則需要去清除浮動(dòng)帶來(lái)的影響方法一采用css clear 屬性 將該屬性添加在被浮動(dòng)影響的。

首先，為浮動(dòng)元素的父級(jí)元素添加 zoom 1 以兼容IE67等瀏覽器然后，在 after 偽元素中設(shè)置 clear bothcontent 為 #39#39display 為 block寬度和高度均為0，并且將 visibility 設(shè)置為 hidden這可以確保 after 偽元素不會(huì)影響布局，同時(shí)清除浮動(dòng)相關(guān)的CSS代碼如下outerzoom1。

實(shí)現(xiàn) DIV 元素浮動(dòng)，需應(yīng)用 CSS3 的 float 屬性此屬性能令元素在容器內(nèi)浮動(dòng)，左右兩側(cè)，從而促使其他元素圍繞其布局示例代碼如下將 float 屬性設(shè)定為 left，使 DIV 元素向左側(cè)浮動(dòng)，并通過(guò) marginright 設(shè)置與其他元素的間距若元素浮動(dòng)后容器高度塌陷，影響布局，則需在容器上添加 overflow。

第二種方法是浮動(dòng)法 這種方法比較靈活，應(yīng)該是float的經(jīng)典應(yīng)用了思路是對(duì)左右元素都設(shè)置浮動(dòng)和寬度但是一定要注意清除子元素的浮動(dòng)及ie6的雙倍margin，不然會(huì)出現(xiàn)錯(cuò)誤效果或影響其他元素的布局 第三種方法是overflow法 這種方法的html代碼和浮動(dòng)法一樣，在這里只是id變了下方便測(cè)試demo其思路是左邊元素。

left display inlineblock center display inlineblock marginleft auto 以上代碼中，container設(shè)置了文本對(duì)齊方式為兩端對(duì)齊，left和center分別設(shè)置為內(nèi)聯(lián)塊級(jí)元素，并通過(guò)marginleft auto實(shí)現(xiàn)居中效果通過(guò)上述CSS代碼，可以輕松實(shí)現(xiàn)一個(gè)內(nèi)的兩個(gè)一個(gè)左浮動(dòng)，一個(gè)居中的。

在CSS中，清除浮動(dòng)是一個(gè)重要的布局技巧，用于解決父元素高度塌陷的問(wèn)題常見(jiàn)的清除浮動(dòng)方法包括使用偽元素和設(shè)置清除類(lèi)一種簡(jiǎn)單直接的方法是使用偽元素，通過(guò)在父元素上添加after偽元素并設(shè)置clearboth，從而清除內(nèi)部元素的浮動(dòng)影響具體實(shí)現(xiàn)代碼如下clearfixafter content quotquot display。

CSS中floatleft的含義 在CSS中，float屬性是用于設(shè)置元素的浮動(dòng)布局方式其中，quotfloatleftquot指的是讓元素浮動(dòng)在其容器的左側(cè)，通過(guò)讓元素向左浮動(dòng)來(lái)調(diào)整其位置這是一種常用的布局方式，尤其在網(wǎng)頁(yè)設(shè)計(jì)中有廣泛的應(yīng)用詳細(xì)解釋 1 float屬性的作用 在CSS中，float屬性允許元素在文本中浮動(dòng)，可以向左。

浮動(dòng)屬性有三個(gè)取值leftright和當(dāng)給一個(gè)元素應(yīng)用floatleft時(shí)，這個(gè)元素將向左漂浮，而當(dāng)應(yīng)用floatright時(shí)，元素則會(huì)向右漂浮如果一個(gè)元素應(yīng)用了浮動(dòng)屬性，它后面的元素可能會(huì)受到影響，改變其在頁(yè)面上的排列順序清除浮動(dòng)clear用于阻止元素受到前面浮動(dòng)元素的影響例如，考慮以下代碼示例。