CSS编辑元素的浮动

2018-06-24 01:21:21来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1.元素浮动:

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

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

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

2.浮动的作用:

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

解决办法:

1 ul{
2     /*重新设置高度*/
3     padding:10px;
4     /*触发BFC*/
5     overflow:hidden;
6 }

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

1 <p>
2     显示内容
3 </p>
4 
5 p{
6    background-color:red;
7    float:left;  
8 }

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

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

1 <a href="#">点一下</a>
2 
3 a{
4    float:left;
5 }

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

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

1 <div>
2     <em>内容</em>
3 </div>
4 
5 div em{
6     float:right;
7 }

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

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【踩坑】360安全浏览器“极速模式”和“兼容模式”,套路还是bug

下一篇:前端页面适配的rem换算