返回顶端

CSS（二）浮动

CSS（二）浮动

1. 标准文档流

我们希望页面的布局如下图左侧所示，排列有序；而实际上页面默认的布局如下图右侧所示，所有元素往下堆。

image-20210407142850644

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之不行

2. display

可以通过修改元素的显示属性，来实现是否独占一行。

display: block;			/*块级元素，独占一行*/
display: inline;		/*行内元素，不独占一行*/
display: inline-block;	/*拥有块级元素的特性，同时又不独占一行，能同排显示*/

3. 浮动

虽然通过display也可以实现行内元素排列的方式，但是用的更多的还是float。

float: left;	/*左浮*/
float: right;	/*右浮*/

样例

<body>

<div id="box">
    <div class="layer01"><img src="images/1.jpg" alt=""></div>
    <div class="layer02"><img src="images/2.jpg" alt=""></div>
    <div class="layer03"><img src="images/3.jpg" alt=""></div>
    <div class="layer04">
        你想是怎样的人，你就是怎样的人；你想成为怎样的人，你就离这个目标不会太远。
    </div>
</div>
</body>

CSS

div{
    margin: 10px;
    padding: 5px;
}
#box{
    border: 1px #000 solid;		/*父级边框黑色实线*/
}
.layer01{
    border: 1px red dashed;		/*子元素边框红色虚线*/
    float: left;		/*左浮*/

}
.layer02{
    border: 1px red dashed;
    float: left;		/*左浮*/
}
.layer03{
    border: 1px red dashed;
    float: right;		/*右浮*/

}
.layer04{
    border: 1px red dashed;
    font-size: 20px;
    line-height: 23px;
    float: right;		/*右浮*/
}

效果

image-20210407145004241

4. 父级边框塌陷问题

使用浮动可以让所有元素浮起来，脱离标准文档流的限制，但也出现了一个问题，即父级边框塌陷成很小的一条，如上图所示，使页面混乱。

解决方案：

a. 增加父级元素的高度

手动设置父级元素的高度，简单易操作，但限制死了页面的高度，不利于网页的后续修改。

#box{
    border: 1px #000 solid;
    height: 1000px;
}

b. 增加一个空的div

在页面末尾增加一个空的div，并调整样式。

页面

<div id="clear"></div>

CSS

#clear{
    clear: both;	//该元素的左右两侧不允许有浮动元素
    margin: 0;
    padding: 0;
}

由于其他元素均浮起来了，因此该空div的位置应该在父级框里面、其他所有元素后面，又因为设置了左右两侧不允许有浮动元素，因此会把父级框拉长到下方没有浮动元素的地方，即解决父级边框塌陷问题。

c. overflow

使用空div虽然能解决塌陷问题，但是在代码中出现空标签是不好的，应当避免。overflow属性能定义溢出元素内容区的内容会如何处理。

可能的值：

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

在父级元素中指定overflow属性为hidden，并且不设置高度，即可实线高度自动框住所有元素。

#box{
    border: 1px #000 solid;
    overflow: hidden;
}

d. 父类添加一个伪类 :after

更加常用的是在父类后添加一个伪类，能够在不改变原有代码的基础上通过新增一点点CSS样式即可解决塌陷问题，为最佳解决方法。

#box{
    border: 1px #000 solid;
}
#box:after{			/*指定在父级元素后面的内容*/
    content: '';
    display: block;
    clear: both;
}

解决效果

image-20210407152821520

posted @ 2021-04-07 15:31  EEEEEEEric  阅读(57)  评论(0)    收藏  举报