浮動元素的特點

float元素的特點:浮動元素在一行顯示!

設定屬性值為left時,浮動元素會依次從父級盒子的左側向右排布,設定屬性值為right時,浮動元素會依次從父級盒子的右側向左排布

浮動元素自動具有塊級元素的屬性

浮動元素脫離文件流

浮動元素內的子元素,不會繼承浮動屬性

浮動元素下面的元素不能識別浮動元素的高度和位置

float元素的**

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style 
type
="text/css"
>
7.conten1,.conten2,.box
12.conten1
15.conten2
18.box
21.box1,.box2
26.box1
29.box2
32span
38/*
39浮動元素的特點
401.在一行顯示
412.浮動元索會脫離文件流導致下而沒有浮動的元索識別不了它的高度和位置就會往上跑占領浮動元素的位置
423.元素都是float:left左浮動元素從左往右依次排列
43元索都是float:right右浮動元索從右往左依次排列
444.父元素浮動子元素並不會繼承父元素的浮動如果想要子元素也在一行顯
45我們需要給子元係也加浮動的屬性
465.浮動屬性不能繼承
476.浮動元素本身具有塊元素的特點所以用了浮動就不需要再加 dispay: block了
487.所有的元素都可以用浮動屬性
49*/
50style
>
51head
>
52<
body
>
53<
div 
class
="conten1"
>
div>
54<
div 
class
="conten2"
>
div>
55<
div 
class
="box"
>
56<
div 
class
="box1"
>
div>
57<
div 
class
="box2"
>
div>
58div
>
59<
span
>行內元素
span
>
60body
>
61html
>

浮動的特點

1.浮動元素不會蓋住文字，自動環繞 2.元素設定浮動後會從文件流中脫離，元素脫離文件流後的特點 2.1塊元素不再獨佔一行 2.2脫離文件流後，塊元素的高度和寬度預設被內容撐開 行內元素脫離文件流後變為塊元素，特點和塊元素一樣 脫離文件流後不再區分塊元素和行內元素 style head body di...

CSS基礎四（浮動，浮動的特點，清除浮動）

目錄 1 什麼是浮動？2 float屬性取值 3 浮動的特點 4 清除浮動 為什麼要清除浮動 清除浮動本質 1 clear屬性用於清除浮動 2 額外標籤法 3 父級新增overflow屬性方法 4 使用after偽元素清除浮動 5 使用before和after雙偽元素清除浮動 由於浮動元素不再占用原...

父元素浮動子元素會浮動嗎 13浮動

1 浮動的定義 float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。css 的 float 浮動 使元素脫離文件流，按照指定的方向 左或右發生移動 直到它的外邊緣碰到包含框或...