其中，float：right；会从右往左显示，详情如图。
文字环绕效果：
img{ float:left}
在style标签下，建立图片的样式，
注意：img前面，没有点，没有点！！！！
【点，是class属性里面用的，标签名直接写就行，不需要写点】
*{} 在CSS里面是所有标签的意思。大概可以理解为通配符。
行内属性，比如span本来是不具有块的，
加了float浮动属性，都会默认变成 块状元素。
浮动元素虽然脱离了正常的文档流， 但依然占据文档空间。
CSS中的定位机制：
1，标准流（普通通流）；
2，定位；
3，浮动；
CSSfloat浮动的缺点：
解决办法：
overflow处理溢出问题；
auto：小滑块，
hidden ：截断！！！
overflow:auto; zoom:1; /*为了让IE浏览器兼容*/
实战：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style>
*{ margin:0; padding:0; }
.head{width: 100% ; height: 64 px ; } . logo{ width: 160 px ; height: 40 px ; float: left ; } . nav{ width: 320 px ; height: 64 px ; float: left ; } . nav-li{ width: 80 px ; height: 64 px ; text-align: 64 px ; color: #333 ; float: left } . icons{ width: 320 px ; height: 64 px ; float: right ; } . i01{ width: 64 px ; height: 64 px ; background: url( "img/htmlhtml.jpg") center center no-repeat ; float: right ;} . i02{ width: 64 px ; height: 64 px ; background: url( "img/htmlhtml.jpg") center center no-repeat ; float: right ;} . i03{ width: 64 px ; height: 64 px ; background: url( "img/htmlhtml.jpg") center center no-repeat ; float: right ; } . i04{ width: 64 px ; height: 64 px ; background: url( "img/htmlhtml.jpg") center center no-repeat ; float: right ;} . i05 { width: 64 px ; height: 64 px ; background: url( "img/htmlhtml.jpg") center center no-repeat ; float: right ; } </style> </head> <body> <div class= "head" > <div class= "logo" > <img src= "img/htmlhtml.jpg" width= "160px" height= "40px" alt= "" > </div> <div class= "nav" > <div class= "nav-li" >实战 </div> <div class= "nav-li" >路径 </div> <div class= "nav-li" >猿问 </div> <div class= "nav-li" >手记 </div> </div> <div class= "icons" > <div class= "i01" ></div> <div class= "i02" ></div> <div class= "i03" ></div> <div class= "i04" ></div> <div class= "i05" ></div> </div> </div> </body> </html>
url("img/htmlhtml.jpg") /* url是CSS里面的图片引用 */
<img src="img/htmlhtml.jpg"> <!- - src是HTML里面的图片引用 - ->
扫一扫
977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
