20180613-CSS-float浮动-系列

其中，float：right；会从右往左显示，详情如图。

文字环绕效果：

img{ float:left}

在style标签下，建立图片的样式，

注意：img前面，没有点，没有点！！！！

【点，是class属性里面用的，标签名直接写就行，不需要写点】

*{} 在CSS里面是所有标签的意思。大概可以理解为通配符。

20180613-CSS-float浮动-系列

行内属性，比如span本来是不具有块的，

加了float浮动属性，都会默认变成块状元素。

浮动元素虽然脱离了正常的文档流，但依然占据文档空间。

20180613-CSS-float浮动-系列

CSS中的定位机制：

1，标准流（普通通流）；

2，定位；

3，浮动；

CSSfloat浮动的缺点：

解决办法：

20180613-CSS-float浮动-系列

overflow处理溢出问题；

auto：小滑块，

hidden ：截断！！！

overflow:auto;
zoom:1;   /*为了让IE浏览器兼容*/

实战：

20180613-CSS-float浮动-系列

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>

      *{
         margin:0;
         padding:0;
     }

      .head{

width:100%; height:64px; } .logo{ width:160px; height:40px; float:left; } .nav{ width:320px; height:64px; float:left; } .nav-li{ width:80px; height:64px; text-align:64px; color:#333; float:left } .icons{ width:320px; height:64px; float:right; } .i01{ width:64px; height:64px; background:url("img/htmlhtml.jpg") center center no-repeat; float:right;} .i02{ width:64px; height:64px; background:url("img/htmlhtml.jpg") center center no-repeat; float:right;} .i03{ width:64px; height:64px; background:url("img/htmlhtml.jpg") center center no-repeat; float:right; } .i04{ width:64px; height:64px; background:url("img/htmlhtml.jpg") center center no-repeat; float:right;} .i05 { width: 64px; height: 64px; 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里面的图片引用 - ->

20180613-CSS-float浮动-系列

相关推荐