网页布局基础(2)-横向俩列布局
博客专区 > iBazinga 的博客 > 博客详情
网页布局基础(2)-横向俩列布局
iBazinga 发表于1年前
网页布局基础(2)-横向俩列布局
  • 发表于 1年前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

一、float属性

3个属性:left(左浮动) /  right(右浮动) /  none(不浮动)

特点:元素会左 / 右移,直至触碰容器为止。



就像容器边缘有磁铁吸引

*注意:设置了浮动的元素,依旧处于标准文档流中。

二、清除浮动影响的方法

     当元素设置浮动属性后,会对相邻的元素产生影响​。(相邻元素特指紧邻后面的元素)

1.clear属性:clear : both  (clear : left 或者 clear : float)
​​​                  ​​​​//   不清楚的情况下使用clear : both

2.同时设置width : 100% (或者固定宽度)+overflow : hidden ;

                 //​    紧邻元素使用方法1   ;  父级元素受影响使用方法2

三、横向俩列布局

方法:1.float属性 - 使纵向排列的块级元素,横向排列;

          2.margin属性 - 设置俩列之间的布局。



清除属性的注意点在不同情况下使用不同清除浮动的方法。

标签: 布局
共有 人打赏支持
粉丝 12
博文 121
码字总数 39904
×
iBazinga
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: