CSS--浮动

在 CSS 中,任何元素都可以浮动。

浮动元素会生成一个块级框,而不论它本身是何种元素。

一、示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动示例title>
    <style>
        .d1 {
            height: 80px;
            width: 80px;
            background-color: tomato;
        }
        .d2 {
            height: 80px;
            width: 80px;
            background-color: steelblue;
        }

    style>
head>
<body>
    <div class="d1">div>
    <div class="d2">div>
body>
html>

CSS--浮动_第1张图片

如何将两个块级标签在一行中展示?

display : inline-block;

.d1 {
    height: 80px;
    width: 80px;
    background-color: tomato;
    display:inline-block;
}
.d2 {
    height: 80px;
    width: 80px;
    background-color: steelblue;
    display:inline-block;
}

CSS--浮动_第2张图片

但是在实际的页面布局中,很少使用display属性,而是采用float

left:向左浮动

right:向右浮动

none:默认值,不浮动

.d1 {
    height: 80px;
    width: 80px;
    background-color: tomato;
		float:left
}
.d2 {
    height: 80px;
    width: 80px;
    background-color: steelblue;
    float:left
}

CSS--浮动_第3张图片

二、浮动的特点

网页其实是一个三维的,网页的 z 轴是以屏幕起点指向人的

没有浮动的标签其实就相当于平铺在屏幕上,而浮动就是让平铺在 x,y 轴(屏幕)的标签,z 轴上处在屏幕和人中间的,不是贴在屏幕上的感觉

关于浮动的两个特点:

  • 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
.d1 {
    height: 80px;
    width: 80px;
    background-color: tomato;
    /*float: left;*/
}
.d2 {
    height: 80px;
    width: 80px;
    background-color: steelblue;
    float: right;
}

CSS--浮动_第4张图片

clear属性

clear属性规定元素的哪一侧不允许其他浮动元素

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

注意:clear属性只会对自身起作用,而不会影响其他元素。

三、父标签塌陷问题




    
    浮动示例
    


    
"d1">
"d2">

CSS--浮动_第5张图片

浮动后

.d1 {
  height: 80px;
  width: 80px;
  background-color: tomato;
  float: left;
}
.d2 {
  height: 80px;
  width: 80px;
  background-color: steelblue;
  float: left;
}

CSS--浮动_第6张图片

解决办法

主要有三种方式:

  • 固定高度—每一个浮动的标签都新建一个空标签,大小对应(明显并不实用)
  • 伪元素清除法—(最常用的方法)
  • overflow:hidden

伪元素清除法(使用较多):

将课程塌陷的父标签 加上 clearfix 属性(自定义什么名字都行)

原理就是利用clear属性

/*清理浮动的代码*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

四、导航栏实例

DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>li标签的float示例title>
  <style>
    /*清除浏览器默认外边距和内填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a标签默认的下划线*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*删除列表默认的圆点样式*/
      margin: 0; /*删除列表默认的外边距*/
      padding: 0; /*删除列表默认的内填充*/
    }
    /*li元素向左浮动*/
    li {
      float: left;
    }

    li > a {
      display: block; /*让链接显示为块级标签*/
      padding: 0 15px; /*设置左右各15像素的填充*/
      color: #b0b0b0; /*设置字体颜色*/
      line-height: 40px; /*设置行高*/
    }
    /*鼠标移上去颜色变白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮动 解决父级塌陷问题*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  style>
head>
<body>

<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城a>li>
    <li><a href="">MIUIa>li>
    <li><a href="">ioTa>li>
    <li><a href="">云服务a>li>
    <li><a href="">水滴a>li>
    <li><a href="">金融a>li>
    <li><a href="">优品a>li>
  ul>
div>

body>
html>

你可能感兴趣的:(前端系列,css,css3,html)