float浮动详解

最新推荐文章于 2024-04-22 21:55:14 发布

我是噢噢噢

最新推荐文章于 2024-04-22 21:55:14 发布

阅读量3.2k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/qq_43558459/article/details/104296424

版权

浮动是css里面布局最多的一个属性，也是很重要的一个属性。让块元素在页面中横向展示的效果。

标准文档流

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。所以在了解浮动之前我们需要了解一下什么是标准文档流
标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
css中让一个元素脱离标准文档流：

浮动
绝对定位
固定定位

块级元素和行内元素

块级元素：
1、独占一行
2、可以设置宽、高
3、如果不设置宽度，宽度默认为容器的100%
行内元素：
1、与其他元素同行显示
2、不可以设置宽、高
3、宽高就是文字或图片的宽高

浮动的基础知识

会使元素向左或者向右移动，只能左右，不能上下。
浮动元素碰到包含框或另一个浮动框，浮动停止。
浮动元素之后的元素将围绕它，之前的不受影响。
浮动元素会脱离标准流。
浮动的基本语法：
float: left 靠左浮动
float: right 靠右浮动
float: none 不使用浮动

文字环绕图片的原理

当我们给图片设置向左浮动以后，图片脱离文档流，这时文字应该往上移从而被图片遮挡住部分的文字，但是文字有特殊的解析机制，它会在一个不被盖住的地方显示，所以出现了文字环图片的效果

使用浮动后产生的问题

高度塌陷
我们知道，一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。
例如，对container不设置高度，对三个盒子都设置为左浮动，这时container出现了高度塌陷，浮动溢出的问题
如图：

清除浮动的常用方法

清除浮动语法：
clear：none（默认）丨left丨right丨both
1.clear:left左侧抗浮动，只影响自身，不影响其他相邻元素
2.clear:right右侧抗浮动，只影响自身，不影响其他相邻元素
3.clear:both左右侧抗浮动，只影响自身，不影响其他相邻元素
注：clear不是把元素身上的浮动清除掉，而是让元素规定的那一侧不允许有其他的浮动元素。

结合语法的几种应用方式：
1.浮动元素后使用一个空元素
例如：<div class=“class”></div>
2.给浮动元素的容器添加overflow:hidden;
（zoom:1 用来兼容ie浏览器/触发hasLayout兼容IE6,7/）
3.使用CSS3的：after伪元素（常用）（给浮动元素的容器添加clearfix的类名）
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{zoom:1;}/触发hasLayout兼容IE6,7/
4.给父元素定义height。只适合高度固定的布局。
5.父元素也一起浮动。不推荐，会产生新的浮动问题。
4.5只做了解即可，后续开发中用到的不多，所以我们来比较一下前面3中方法：
第一种 , 结尾处加空div标签clear:both
如果页面浮动布局多，就要增加很多空div ,会感觉很麻烦了
第二种,父级div定义overflow:hidden
用起来很省事 ,只有一行代码 ,不过因为overflow:hidden还有一个作用就是超出盒子的内容会被隐藏 ,所以不能和position配合使用，因为超出的就会被隐藏
第三种 , 父级div定义伪类:after和zoom
这种方法样式的代码多，要两段代码结合使用，才能让主流浏览器都支持
总结：这三种方式差异并不是很大 . 实际运用中 ,第三种用法比较多 . 是因为第三种直接在css定义一个公共的类名 ,然后清除浮动是给元素加上类名即可，用起来比较方便

案例

导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nav-demo</title>
    <link rel="stylesheet" href="nav.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">
                <a href="#">Balbal</a>
            </div>
            <ul class="nav"> 
                <li><a href="#">Meet</a></li>
                <li><a href="#">Close</a></li>
                <li><a href="#">Understand</a></li>
                <li><a href="#">Love</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}
.container{
    width: 100%;
    margin: 0 auto;
}
.header{
    width: 100%;
    background-color:gray;
    overflow: hidden;
    zoom: 1;
}
.header .title{
    width: 200px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    float: left;
}
.header .nav{
    float: right;
    overflow: hidden;
    zoom: 1;
    padding-right: 30px;
}
.header .nav li{
    float: left;
    margin-right: 20px;
}
.header .nav li a{
    padding: 0 20px;
    height:80px;
    line-height: 80px;
    display: block;
    font-size: 16px;
}
.header .nav li a:hover{
    color:#fff;
}

显示效果：
在这里插入图片描述

我是噢噢噢

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
float浮动详解

浮动是css里面布局最多的一个属性，也是很重要的一个属性。让块元素在页面中横向展示的效果。标准文档流当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。所以在了解浮动之前我们需要了解一下什么是标准文档流标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，...
复制链接

扫一扫