【⼲货】：怎么让元素⽔平排列
块级元素默认是垂直排列的，⽽⾏内元素是⽔平排列的，⽽在布局时基本上都是⽤块级元素，如div等常⽤块级标签，那么如何让块级元素也进⾏⽔平排列呢？我有100种⽅式（准确说是100-94种）让元素⽔平排列，你知道⼏种呢？
第⼀种：display：inline-block
  ⾸先得先了解块级元素（block elements）和⾏内元素（inline elements）
    这⾥可能有⼈会产⽣疑问，“button和img以及input等标签可以设置宽度和⾼度也可以设置margin与padding，为什么它确实⾏内元素呢？”其实html元素主要有两种划分⽅式，分别是“块级元素与⾏内元素”，“替换元素与不可替换元素”。上⾯介绍了第⼀种划分⽅式，下⾯介绍⼀下第⼆种划分⽅式：
    不可替换元素：除了替换元素剩下的都是不可替换元素（O(∩_∩)O）
扯了⼀⼤堆，我们知道display：inline-block可以让元素横向排列，但是这种布局可能会存在⼀点点⼩问题，举栗⼦：
<style>
div{
display:inline-block;    width:200px;    height:200px; } .div1{ background:green; } .div2{ background:red; } </style> <div class = "div1">左边</div>
<div class = "div2">右边</div>
这是我们发现两个div之间存在⼀个空隙，这是为什么呢？
  浏览器会将换⾏符，缩进符，以及空格当做⼀个空格来处理，即使暗恋两次空格，或者⼀个换⾏加⼀个空格，等等都会解析成⼀个空格使⽤。这个空格的⼤⼩则是font-size/2⼤⼩。去除这个空隙有很多办法。
  1.设置div2的margin-left:-font-size/2
  2.设置两个div的⽗标签的font-size:0
  3.设置负的word-spacing
第⼆种：float：left/right
  float属性可以让元素脱离常规⽂档流，沿着容器的左侧或者右侧进⾏⽔平排列。
  这种⽅式可以说是⽤的最多的，但是有个问题，在⾃适应布局中⼀般不会固定元素的⾼宽，会根据内容⼤⼩来⾃动调整，这是如果⼦元素都是浮动元素的话就会存在⾼度塌陷。
举栗⼦
<style>
span{
float:left;        width:200px;    height:200px; } .box1{ background:green; } .box2{ background:red; } </style> <div> <span class = "box1">左边</span> <span class = "box2">右边</span> </div>
  这⾥将上⼀个栗⼦中的⼦元素div故意改成了span，其实想表达float可以将元素隐式的转换成block元素（position:absolute/fixed亦可），所以⾃然就可以设置宽度和⾼度。
那么盒⼦⽔平排列之后存在什么问题呢？没错！⽗容器⾼度塌陷。这时⽗容器div的⾼度为0，因为浮动元素会脱离常规⽂档流，它的⽗容器计算⾼度时会忽略它。这是我们不想看到的，因为这个⾼度塌陷的DIV后⾯如果还有其它常规流标签的话，那么页⾯就会出现错乱等不想看到的结果。
  解决办法⾃然就是清除浮动，主要通过两种⽅式清除浮动：
    1.clear:left/right/both，专门⽤来清除浮动的CSS。
    2.BFC，因为BFC有⼀条规则“计算BFC的⾼度时，浮动元素也参与计算”。
  说⼀下⽤clear清除浮动的⼏种⽅法：
    1.最后⼀个⼦元素后⾯加⼀个空标签，然后设置其样式clear:both。
    2.在最后⼀个浮动⼦元素中，利⽤伪元素::after，添加clear样式清除浮动
  通过BFC解决⾼度塌陷：
    为⽗元素创建BFC（摘⾃MDN），只要满⾜以下任何⼀种都会为元素创⽴BFC。
A block formatting context is created by one of the following:position标签属性
the root element or something that contains it
floats (elements where  is not none)
absolutely positioned elements (elements where  is absolute or fixed)
inline-blocks (elements with : inline-block)
table cells (elements with : table-cell, which is the default for HTML table cells)
table captions (elements with : table-caption, which is the default for HTML table captions)
elements where  has a value other than visible
flex boxes (elements with : flex or inline-flex)
我英语不好，上⾯的英⽂也能看懂，所以它就不需要翻译了吧，建议动⼿试⼀下。
第三种：table布局
  这种布局⽅式其实不常⽤，因为它存在种种问题。
    ·渲染速度较慢
    ·增加html代码量，不易维护
    ·标签的名字不符合html语义化，table本来就是做表格⽤的，拿来布局甚是不妥
    ·标签结构较死，后期修改成本较⾼
等等，此处不作过多阐述。总之，尽量⽤table布局
第四种：绝对定位
  这种⽅式⽇常开发中⽤的也较多，前⾯提到float可以让元素脱离常规⽂档流，这⾥position:absolute/fixed也具有同样的效果，处理办法在float布局中已经提到了，这⾥搬来即可。
  这⾥要说⼀下position:absolute绝对定位，以它的第⼀个⽗级并且是position:absolute/relative/fixed等飞static定位的元素为基点进⾏定位，如果不到则以根元素为基准进⾏定位。⼀般都是采⽤⽗元素position:ralative，⼦元素position:absolute结合使⽤。
第五种：css3的弹性布局
弹性布局因为其兼容性所以还没有得到⼴泛的认可，不过我觉得以后它肯定会独占鳌头，就跟我看好html的视频播放器⼀样，早晚都会⼲败flash，只是时间问题
第六种：transform:translate
  CSS3中⽤于动画的⼀个样式，但是他可是让两个元素横向排列，这⾥不多说直接上代码，请⽤⾕歌浏览器运⾏⼀下：
<style>
div{
width:200px;    height:200px;
}
.box1{
background:green;
}
.box2{
transform: translateX(200px) translateY(-200px);
background:red;
}
</style>
<div>
<div class = "box1">左边</div>
<div class = "box2">右边</div>
</div>
效果和前⼏种⽅式⼀样。
以上就是我说分享实现横向布局的六种⽅式，其实每种⽅式都有很多⼤学问，我解释描述了冰⼭⼀⾓，并且没有过多的考虑浏览器的兼容性，不过还是希望对你有所帮助。

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