今日总结（浮动的一部分）

然而我发现用了clear和不用的区别就是多了一个框框，并且，这个框还框不住我的图。（据此，我分析为，自是一般情况下容器可以包围浮动元素，如果图片或者content太大，就应该进行特殊调整，如下图2，并没有完全框住）

容器没有包围浮动元素(文本内容在右下角“some text”) 加了clear

1.about"clear"

这条语句是在css里使用，如下图所示，当语句为"clear:both;",表示为图像的左侧右侧均不允许出现浮动元素。而相应的

clear:left;表示图像左侧不允许出现浮动元素

clear:right;表示图像右侧不允许出现浮动元素

clear:inherit;就是继承父元素的属性

此浮动没有优先级设置，按照顺序进行，并且，只能清除左右两侧代码，如果文本内容在图片之前，则显示的时候还是先显示文本内容。

2.图像浮动在段落的左右侧

img {float:right;}此时图像浮动在段落的右侧

自然而然img {float:right;}，图像浮动在段落的左侧。

注：发现，当img{float:right;}里面的分号不打时，效果是一样的，又试了好多css里面别的语句，发现都不影响效果。

3.将有标题的图片居于文本左右侧

比如说，文本内容，图片在div块级元素中，

div

{

float:right;

width:120px;

margin:0 0 15px 20px;

padding:15px;

border:1px solid black;

text-align:center;

}

在语句中，设置div的宽度可以包含图片。div 元素浮动到右侧(第二点中讲的float)。向 div 元素添加了外边距(margin)，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框(border)和内边距(padding)，并且使得文本内容居中。

浮动于左侧的道理是一样的。

4.将带边框，边界的图像浮动于段落的左右侧

和3的道理一样，万变不离其宗。代码如下

这是将图片浮动于右侧

img

{

float:right;

border:1px dotted black;

margin:0px 0px 15px 20px;

}

相对应的，浮动于左侧就是将right变成left.

5.使段落的首字母浮动于段落左侧

因为要设置段落首字母，自然就单独放，将其放在一个行级元素内，对行级元素进行调整。比如首字母为"H",将其放在<p></p>中，

p

{

float:left;

width:0.7em;

font-size:400%;

font-family:algerianr;

line-height:80%;

}

首先还是和2一样，用float放在左侧，设置“H”宽度是当前字体尺寸的 0.7 倍。字体尺寸是 400%，行高是 80%,字母字体是 "Algerian"。这些都可以自己更改

首字母是句子的左边，所以这个只有左侧。但是想结尾字母较大，方法是一样的。