详解css元素浮动和作用

时间:6年前   阅读:4900

1、元素浮动:

(1)使用 float:left; 这样的格式设置元素的浮动方式,属性值可以是left,right;

(2)元素设置为左浮动时,元素将从原区域浮动到浏览器的左侧页面;右浮动时,就会附在右侧的区域,而且元素是按照第一个元素在右侧的第一个位置,依次往左排列;

(3)设置了浮动后,该元素相当于直接脱离元素的原来放置层,漂浮在该层之上,该元素位置下方的元素将占用该元素的位置。

2、浮动的作用:

(1)子级浮动导致父级元素的高度塌陷;

解决办法:

 ul{
     /*重新设置高度*/
     padding:10px;
     /*触发BFC*/
     overflow:hidden;
 }

(2)浮动具有包裹性(浮动之后只包含内容区域);

<p>
    显示内容
</p>


p{
   background-color:red;
   float:left;  
}

执行以上代码后,只会在“显示内容”四个字的地方将背景色渲染成红色。

(3)行内元素设置浮动后改变了display属性,也就可以设置相应的content的width和height值;

<a href="#">点一下</a>

a{
 float:left;
}

以上代码执行后,可以在审查时看见 a 的width和height均可以设置具体的值,不再是auto。

(4)元素浮动不会穿过padding区域,只会在content区域中;

<div>
    <em>内容</em>
</div>

div em{
    float:right;
}

在网页中可以看见“内容”只是从content原来的左侧区域移动到了右侧。

(5)浮动会导致脱离文档流,影响到其他的元素。(如最上面的第三点,大家可以自己用两个div来验证)

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:大盘重返3000点,期权合约还能高涨吗?

下一篇:认购期权价格上涨后的操作技巧有哪些?

网友评论

请先 登录 再评论,若不是会员请先 注册