css进阶（二）——float使用详解

最新推荐文章于 2024-05-05 20:21:31 发布

菜腿1994

最新推荐文章于 2024-05-05 20:21:31 发布

阅读量818

点赞数

分类专栏： ◆前端框架

本文链接：https://blog.csdn.net/changyinling520/article/details/79418253

版权

◆前端框架专栏收录该内容

27 篇文章 4 订阅

订阅专栏

前言

其实在做前端页面的时候我们都或多或少的使用过float这个css属性，但是说实话之前我一旦遇到元素要放在左边或者右边的时候就会用这个属性，但是使用float会出现一些意想不到的效果，由于他的特殊性，脱离文档流的控制，会打乱布局，所以对于float的使用有相关的解决方案。

内容

float的主要应用的两种情况：

一.文字的环绕

1.图片和标签包含在一个 section=元素中，而 section 元素后面跟着一个 footer 元素。实现的效果图：
这里写图片描述

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动效果</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>

        <section>
                <img src="img/zhao2.jpg"/>
                <p>我非常喜欢这张照片</p>
        </section>
        <footer>演员赵丽颖</footer>  

</html>

正常使用float的css代码：


@charset "utf-8";

p{
    margin: 0;
}

section{
    margin: 0 0 20px 0;
    border: 1px solid bisque;}
img{
    float: left;
    width: 200px;
    height: 150px;
}

footer{
    border: 1px solid indianred;
    text-align: center;
}

但是带来的页面效果却是这样的：
这里写图片描述
使用float会使该浮动元素脱离文档流，其父元素看不见它，而且不会包围它，所以我们要想办法令父元素包含浮动的子元素，下面介绍三种从书上看见的方法：
1.为父元素添加overflow:hidden;

section{
    margin: 0 0 20px 0;
    border: 1px solid bisque;
    overflow:hidden;
}

科普：

overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用
overflow:hidden 之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容
器剪切掉。除此之外， overflow:hidden 还有另一个作用，即它能可靠地迫使父元素
包含其浮动的子元素。

2.同时浮动父元素，并且清除其他元素的浮动


@charset "utf-8";

p{
 margin: 0;
}

section{
    margin: 0 0 20px 0;
    border: 1px solid bisque;
    float:left; //父元素进行左浮动
    width:100%//宽度设置成100%
}
img{
    float: left;
    width: 200px;
    height: 150px;
}

footer{
    border: 1px solid indianred;
    text-align: center;
    clear: left; //清除footer的左浮动
}

注意：
由于浮动元素脱离了文档流，所以footer就会尽可能向其旁边靠拢，必须让其清除浮动，否则就会呈现下面的效果：
这里写图片描述
3.添加非浮动的清除元素:

通过页面添加清除元素

<section class="clearfix">
                <img src="img/zhao2.jpg"/>
                <p>我非常喜欢这张照片</p>
                <div class="clear_me"></div>
        </section>

        <footer>演员赵丽颖</footer>

p {
    margin: 0;
}

section {
    margin: 0 0 20px 0;
    border: 1px solid bisque;
    width: 100%
}

img {
    float: left;
    width: 200px;
    height: 150px;
}
.clear_me{
    clear: left;
}
footer {
    border: 1px solid indianred;
    text-align: center;
}

通过清除伪元素实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动效果</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>

        <section >
                <img src="img/zhao2.jpg"/>
                <p class="clearfix">我非常喜欢这张照片</p>
        </section>
        <footer>演员赵丽颖</footer>  

</html>

@charset "utf-8";
p {
    margin: 0;
}

section {
    margin: 0 0 20px 0;
    border: 1px solid bisque;
    width: 100%
}

img {
    float: left;
    width: 200px;
    height: 150px;
}

footer {
    border: 1px solid indianred;
    text-align: center;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

两种方式都可以，不过第一种看着比较麻烦一点，还需要在页面写一个div，不如使用clearfix规则更加简便，采用就是伪元素的方法，对于伪元素的介绍，上一篇文章中有一些介绍可以参考一下。

二.分栏系统

通过float实现下面的效果：
这里写图片描述
代码展示如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动效果</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>

        <section >
                <img src="img/zhao2.jpg"/>
                <p class="clearfix">我非常喜欢这张照片</p>
                <div class="clear_me"></div>
        </section>

        <footer>演员赵丽颖</footer>  

</html>

section {
    width: 300px;
    border: 1px solid red;
}

p {
    margin: 0 0 5px 0;
}

img {
    float: left;
    margin: 0 4px 4px 0;
}

.clearfix:after {
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;

}