20180613-CSS-float浮动-系列

其中，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里面的图片引用 - ->

20180613-CSS-float浮动-系列

猜你喜欢