横向布局中浮动float和inline-block的使用

最新推荐文章于 2021-07-31 19:20:45 发布

ime33

最新推荐文章于 2021-07-31 19:20:45 发布

阅读量1.8k

点赞数 2

分类专栏：前端布局文章标签： inline-block float left display 间距

本文链接：https://blog.csdn.net/ime33/article/details/54143954

版权

前端布局专栏收录该内容

25 篇文章 0 订阅

订阅专栏

版权声明：本文为博主原创文章，未经博主允许不得转载。

如果说得不好或不对之处还请同行朋友指点~~~

在前端开发过程中CSS横向布局几乎在每个项目中都会所有涉及，这种布局主要有浮动float和inline-block两种实现方式！

首先说说float：浮动属性（left，right，none，inherit）

float定义元素影响：

1、脱离文档流进行布局；

2、自动给浮动元素赋予block的属性；

3、浮动的元素布局错乱。

在使用浮动布局的时候一定要记得清浮动；清理浮动的方法有很多，针对不同情况灵活使用，这里简单说下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>http://blog.csdn.net/ime33 demo float:left</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none outside none;
                padding: 10px;
                background: #eee;
                text-align: center;
                overflow: hidden;
            }
            li {
                display: block;
                float: left;
                zoom: 1;
                background: #ff5555;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>demo1</li>
            <li>demo2</li>
            <li>demo3</li>
            <li>demo4</li>
            <li>demo5</li>
        </ul>
    </body>
</html>

效果：

1. 结尾处加额外元素css{clear：both}

2.给父元素添加伪类after、before{display:block;clear:both;content:"";visibility:hidden;height:0}，此方法需要兼容万恶的低版本的IE浏览器_zoom:1.

3.父级元素css{overflow：hidden}或css{overflow：auto}两者需定义宽度或者zoom以及但不能有高度！但hidden不能和已定位position元素一起使用！

4.父级元素已表格形式呈现，css{display:table}

5.父级元素一起浮动float

清理浮动的方法有很多，我个人比较喜欢伪类和添加额外标签进行清浮动，浏览器兼容性好，怪现象少，简单，写个公共类调用代码量也少！

再说说inline_block影响：

它包括了inline行内元素和block块级元素的定义！规定元素以行内块级元素的形式进行呈现！

使用过的它都知道，会出现万恶的间距，为4px（8px谷歌）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>demo inline-block</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none outside none;
                padding: 10px;
                background: #eee;
                text-align: center;
            }
            ul li {
                display: inline-block;
                *display: inline;
                zoom: 1;
                background: #ff5555;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>demo1</li>
            <li>demo2</li>
            <li>demo3</li>
            <li>demo4</li>
            <li>demo5</li>
        </ul>
    </body>
</html>

效果：

虽说达到了与float的横向布局同样的效果，但是这中间几个像素的空白，总是令人不爽，更何况还有产品经理，测试嘞！在下面说说去除这空白的一些方法前要知道空白是如何造成，其实这不是人家浏览器的bug，而是我们程序员的坑，我们在进行页面布局的时候为了使得页面更显得层级化，也为了后端兄弟看的舒服些，在标签结束末尾习惯性敲个回车，这就产生了一个“空白字符”，空白字符也是字符，占用空间，所以在inline-block的时候就会出现这鸟问题了，不废话，说解决：

1.既然是字符那可以不换行，一行下来呗；

<ul><li>demo1</li><li>demo2</li><li>demo3</li><li>demo4</li><li>demo5</li></ul>

2.将空白字符的父级文字大小设置为0；font-size：0，在子元素的列项设置正常字号，火狐就letter-spacing：-Xpx；

3.当然margin可以达到效果，但万恶的是，谷歌是8px（它还有最小字号12px），这就蛋疼了，外部环境受限；

4.letter-spacing和word-spacing字符缩进，注意虽然他们都是字符缩颈，但是word-spacing是单词缩进，它对中文无效；

5.一个老外的法子：

li {
    display:inline-block;
    background: #ff5555;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 兼容webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}

6.还有些旁门左道：比如丢掉结束标签,不是很靠谱，

<ul>
            <li>demo1
            <li>demo2
            <li>demo3
            <li>demo4
            <li>demo5
        </ul>

7.还有查资料看到的jquery方法：

CSS:

ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 12px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}

Jquery：

$('.removeTextNodes').contents().filter(function() {
return this.nodeType === 3;
}).remove();

个人喜好第二种方法，好用易理解！

结语：当然还有其他的方法，欢迎补充，以上若有不周到的地方，欢迎各位大牛指正交流~~

原创文章，转载请注明来自ime33博客
本文地址：http://blog.csdn.net/ime33/article/details/54143954

ime33

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
横向布局中浮动float和inline-block的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。如果考虑不周之处还请同行朋友指点~~~在前端开发过程中CSS横向布局几乎在每个项目中都会所有涉及，这种布局主要有浮动float和inline-block两种实现方式！首先说说float：浮动属性（left，right，none，inherit）float定义元素影响：1、脱离文档流进行布局；2、自动给浮动
复制链接

扫一扫

专栏目录