css 中 float 的属性及清除 float

简单的 html

<body>
<div class="box1 ">
    <ul>
        <li>111111li>
        <li>222222li>
        <li>333333li>
        <li>444444li>
    ul>
div>

<div class="box2 ">
    <ul>
        <li>111111li>
        <li>222222li>
        <li>333333li>
        <li>444444li>
    ul>
div>
body>

给 div 设置背景色

.box1 {
    background: #64bd63;
}

.box2 {
    background: #ff7e00;
}

li {
    width: 100px;
}

其他的样式都没有设置,这时运行是的效果是这样的

css 中 float 的属性及清除 float_第1张图片

为 li 标签设置 float:left 后的效果是这样的

在这里插入图片描述

这是因为它的父容器 div 没有设置高度,在 li 设置了 float 属性之后,div 的高度就会变成0,不会被 div 内的其他元素撑出一个高度来,可以在浏览器中查看,显示 div.box1 的高度为0

在这里插入图片描述

在为 li 设置了 float 属性之后,它的父容器的高如果没有设置值的话,就会变成 0。

现在给 box1和 box2 设置 clear:both,清除 div 两边的 float,运行后的结果是这样的

在这里插入图片描述

这个时个 div 的高度还是0,如果给 div 指定高度值的话,它的效果是这样的,div 设置了高度之后,可以不会设置 clear:both 也会是这样的效果,这时div 的高度就是指定的高度

css 中 float 的属性及清除 float_第2张图片

但是有的时候并不想要指定的高度,而是根据 div 中的内容自适应高度,可以用以下的方法来设置

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/
}

为 div 添加上述样式

<div class="box1 clearfix">
    <ul>
        <li>111111li>
        <li>222222li>
        <li>333333li>
        <li>444444li>
    ul>
div>

<div class="box2 clearfix">
    <ul>
        <li>111111li>
        <li>222222li>
        <li>333333li>
        <li>444444li>
    ul>

div>

运行后效果是这样的

在这里插入图片描述

  • .clearfix:before 的意思是在该容器的前面设置的属性
  • .clearfix:after 的意思是在该容器的后面设置的属性
  • 其中的 content:"“的意思是在容器的前后添加的内容为”"
  • dispaly:table,显示为块级,block 也是可以的,只要显示为块级就可以
  • 如果不设置 content:"" 的话是没有清除效果的,在前面也说到设置了 clear:both 之后,该容器的高度还是 0,那么在它之前和之前添加一些内容,即 conten:"",并且让它的显示方式为块级,这样就该容器就可以被容器内的元素撑开一个高度了

你可能感兴趣的:(css 中 float 的属性及清除 float)