2018-05-22html横向布局
标签：
我们都知道html块级元素默认是垂直排列的，⽽⾏内元素时⽔平排列的，⽽在布局时基本上都是⽤块级元素，如div等常⽤块级标签，那么如何让块级元素也进⾏⽔平排列呢？
这⾥我总结了五种⽅式，并简单总结了这五种⽅式的具体实现以及可能存在的问题。
⽅法1：display：inline-block
⾸先得先了解块级元素（block elements）和⾏内元素（inline elements）以及⾏内块状元素（inline-block elements）
    这⾥可能有⼈会产⽣疑问，“button和img以及input等标签可以设置宽度和⾼度也可以设置margin与padding，为什么它确实⾏内元素呢？”其实html元素主要有两种划分⽅式，分别是“块级元素与⾏内元素”，“替换元素与不可替换元素”。上⾯介绍了第⼀种划分⽅式，下⾯介绍⼀下第⼆种划分⽅式：
不可替换元素：除了替换元素剩下的都是不可替换元素（O(∩_∩)O）
不可替换元素
扯了⼀⼤堆，我们知道display：inline-block可以让元素横向排列，但是这种布局可能会存在⼀点点⼩问题，举栗⼦：
div{            display:inline-block;    width:200px;    height:200px;}        .div1{            background:green;}        .div2{          background:red;}
左边
右边
css布局左边固定右边自适应⽅法2：float：left/right
float属性可以让元素脱离常规⽂档流，沿着容器的左侧或者右侧进⾏⽔平排列。
  这种⽅式可以说是⽤的最多的，但是有个问题，在⾃适应布局中⼀般不会固定元素的⾼宽，会根据内容⼤⼩来⾃动调整，这是如果⼦元素都是浮动元素的话就会存在⾼度塌陷。
举栗⼦
span{            float:left;        width:200px;    height:200px;}        .box1{            background:green;}        .box2{          background:red;}
左边右边
先说⼀点，这⾥将上⼀个栗⼦中的div故意改成了span，其实想表达float可以将元素隐式的转换成block元素（position:absolute/fixed亦可），所以⾃然就可以设置宽度和⾼度。
那么盒⼦⽔平排列之后存在什么问题呢？没错⽗容器⾼度塌陷。这时⽗容器div的⾼度为0，因为浮动元素会脱离常规⽂档流，它的⽗容器计算⾼度时会忽略它。这是我们不想看到的
解决办法⾃然就是清除浮动，可以在⽗div设置overflow:hidden，或者在最后⼀个⼦元素后⾯加⼀个空标签，然后设置其样式clear:both。更多清除浮动的⽅法请百度“css清除浮动”
⽅法3：table布局
这种布局⽅式其实不常⽤，因为它存在种种问题。
    ·渲染速度较慢
    ·增加html代码量，不易维护
    ·标签的名字不符合html语义化，table本来就是做表格⽤的，拿来布局甚是不妥
    ·标签结构较死，后期修改成本较⾼
等等，此处不作过多阐述。总之，不要⽤table布局
⽅法四：绝对定位
这种⽅式⽇常开发中⽤的也较多，前⾯提到float可以让元素脱离常规⽂档流，这⾥position:absolute/fixed也具有同样的效果，处理办法在float 布局中已经提到了，这⾥搬来即可。
  这⾥要说⼀下position:absolute绝对定位，以它的第⼀个⽗级并且是position:absolute/relative/fixed定位的元素为基点进⾏定位，如果不到则以根元素为基准进⾏定位。⼀般都是采⽤⽗元素position:ralative，⼦元素position:absolute结合使⽤。
⽅法五：css3的弹性布局
弹性布局因为其兼容性所以还没有得到⼴泛的认可，不过我觉得以后它肯定会独占鳌头，就跟我看好html的视频播放器⼀样，早晚都会⼲败flash，只是时间问题
以上就是我说知道的实现横向布局的五种⽅式，其实每种⽅式都有很多⼤学问，我解释描述了冰⼭⼀⾓，并且没有过多的考虑浏览器的兼容性，不过还是希望对你有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。