学了三个星期的前端，平常我遇到的比较多BUG就是浮动问题，下面给大家总结一下吧。浮动：概念和作用

浮动：让元素脱离文档流，进行页面效果的布局；

作用：让多个盒子水平排列一行显示，盒子左右对齐，最早是用来实现文字环绕文字；

属性和属性值

属性：float

取值：left和right 还有一个none不浮动

浮动的特性

浮： 元素脱离文档流（标准流），自己的位置空了，其他的元素会补上来；

漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特点：

• 1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

• 2、浮动之后的元素之间的没有缝隙的，紧贴在一起；

• 3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

常见的浮动布局左右布局*

做浮动布局的时候一定要注意，给大的父级盒子要设置固定的宽度和高度（尽量设置），然后在让里面的自己和浮动；

一个大的父级盒子嵌套了两个子级盒子，父级盒子一定要给固定的宽高，第一个子级盒子左浮动，第二个子级盒子右浮动，就可以实现常见的左右布局；

左中右布局

一个大的父级盒子嵌套三个子级盒子，父级盒子要设置固定的宽高，然后第一个子级盒子左浮动float:left;，第二个盒子也左浮动float:left;第三个盒子右浮动float:right;，最后设置第二个盒子的margin-left值来拉开盒子之间的距离；

布局的注意事项

利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；

实际开发中导航的书写

实际开发中导航布局使用ul嵌套li，li嵌套a实现

html结构：一个大的div盒子类名称命名为nav,里面嵌套ul,然后ul里面嵌套li，，li里面嵌套a，，a里面放文字；

css书写：

01、 设置大的div的实体化宽高

02、 设置li的样式：左浮动float:left;，设置li的固定高度，宽度分为两种情况：

情况1：如果导航里面的文字个数一致，我们就直接将li的宽度固定死；

情况2：如果导航里面的文字不一样多，那么就不要给li设置宽度，后面用a来撑开；

03、设置a的样式： 首先将a的显示模式用display:block;转化为块元素,然后设置a的宽和高，高和li的高度一致，宽度如果文字一样多我们就设置为固定的宽度，如果文字不一样多，宽度就不设置，用padding：0 20px;撑开，意思就是上下内边距为0，左右设置一个固定的值就可以撑开a；

浮动元素与父盒子的关系

• 浮动之后的子元素是以父级盒子为参照对齐的，不会与父级的边框重叠，也不会超出父级盒子的内边距；

浮动元素与兄弟盒子的关系

1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示，而且紧贴在一起顶端对齐；

2、做布局的时候所有的盒子必须都浮动，才能完成效果；

清除浮动问题：

在做浮动布局的时候，如果父级盒子嵌套了子级盒子，如果父级盒子没有设置固定的高度，那么里面的子级盒子浮动以后，父级盒子的高度就不会被撑开，显示默认的高度为0就会影响后面的盒子显示布局；

说明：

• 用浮动布局的时候我们必须要嵌套一个父级盒子，分为以下两种情况：

• 1、有些父级盒子能够设置固定的高度，一定要设置；

• 2、有些页面由于页面的需要不能设置高度，所以子元素浮动之后脱离了文档流，父级盒子不会被撑开，会影响我们的布局，所以要清除浮动的影响；比如：产品的详情页、产品的展示列表页等；

• 3、如果父级盒子没有设置固定的高度，但是子级盒子没有浮动，子级盒子就会撑开父级盒子；

清除浮动的本质

父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；

解决方案1：

如果盒子允许设置固定的高度我们就直接给父级盒子设置固定的高度就会解决问题；

清除浮动的方法 – 方案2父级加overflow属性法（推荐使用）

直接给父级添加overflow:hidden;强制的区分了父子级的关系，让父级盒子自适应子级盒子的高度；

简单了解overflow

overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；

overflow:auto;  溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示；

清除浮动之after伪元素（推荐使用）

After伪元素清除浮动法实际开发中推荐使用：

/*声明清除浮动的样式*/

.clearfix:after {

        content: "";

        display: block;

        height: 0;

        visibility: hidden;

         clear: both;

}

.clearfix {

    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

谁里面的子级盒子浮动了，就在谁的开始标签身上添加class=“clearfix”

双伪元素清除浮动（推荐）

使用方法和After伪元素法一模一样

/*声明清除浮动的样式*/

.clearfix:before ,.clearfix:after {

        content: "";

        display: table;

}

.clearfix:after {

    clear:both;

}

.clearfix {

   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

学了三个星期的前端，平常我遇到的比较多BUG就是浮动问题，下面给大家总结一下吧。浮动：概念和作用

浮动：让元素脱离文档流，进行页面效果的布局；

作用：让多个盒子水平排列一行显示，盒子左右对齐，最早是用来实现文字环绕文字；

属性和属性值

属性：float

取值：left和right 还有一个none不浮动

浮动的特性

浮： 元素脱离文档流（标准流），自己的位置空了，其他的元素会补上来；

漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特点：

• 1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

• 2、浮动之后的元素之间的没有缝隙的，紧贴在一起；

• 3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

常见的浮动布局左右布局*

做浮动布局的时候一定要注意，给大的父级盒子要设置固定的宽度和高度（尽量设置），然后在让里面的自己和浮动；

一个大的父级盒子嵌套了两个子级盒子，父级盒子一定要给固定的宽高，第一个子级盒子左浮动，第二个子级盒子右浮动，就可以实现常见的左右布局；

左中右布局

一个大的父级盒子嵌套三个子级盒子，父级盒子要设置固定的宽高，然后第一个子级盒子左浮动float:left;，第二个盒子也左浮动float:left;第三个盒子右浮动float:right;，最后设置第二个盒子的margin-left值来拉开盒子之间的距离；

布局的注意事项

利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；

实际开发中导航的书写

实际开发中导航布局使用ul嵌套li，li嵌套a实现

html结构：一个大的div盒子类名称命名为nav,里面嵌套ul,然后ul里面嵌套li，，li里面嵌套a，，a里面放文字；

css书写：

01、 设置大的div的实体化宽高

02、 设置li的样式：左浮动float:left;，设置li的固定高度，宽度分为两种情况：

情况1：如果导航里面的文字个数一致，我们就直接将li的宽度固定死；

情况2：如果导航里面的文字不一样多，那么就不要给li设置宽度，后面用a来撑开；

03、设置a的样式： 首先将a的显示模式用display:block;转化为块元素,然后设置a的宽和高，高和li的高度一致，宽度如果文字一样多我们就设置为固定的宽度，如果文字不一样多，宽度就不设置，用padding：0 20px;撑开，意思就是上下内边距为0，左右设置一个固定的值就可以撑开a；

浮动元素与父盒子的关系

• 浮动之后的子元素是以父级盒子为参照对齐的，不会与父级的边框重叠，也不会超出父级盒子的内边距；

浮动元素与兄弟盒子的关系

1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示，而且紧贴在一起顶端对齐；

2、做布局的时候所有的盒子必须都浮动，才能完成效果；

清除浮动问题：

在做浮动布局的时候，如果父级盒子嵌套了子级盒子，如果父级盒子没有设置固定的高度，那么里面的子级盒子浮动以后，父级盒子的高度就不会被撑开，显示默认的高度为0就会影响后面的盒子显示布局；

说明：

• 用浮动布局的时候我们必须要嵌套一个父级盒子，分为以下两种情况：

• 1、有些父级盒子能够设置固定的高度，一定要设置；

• 2、有些页面由于页面的需要不能设置高度，所以子元素浮动之后脱离了文档流，父级盒子不会被撑开，会影响我们的布局，所以要清除浮动的影响；比如：产品的详情页、产品的展示列表页等；

• 3、如果父级盒子没有设置固定的高度，但是子级盒子没有浮动，子级盒子就会撑开父级盒子；

清除浮动的本质

父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；

解决方案1：

如果盒子允许设置固定的高度我们就直接给父级盒子设置固定的高度就会解决问题；

清除浮动的方法 – 方案2父级加overflow属性法（推荐使用）

直接给父级添加overflow:hidden;强制的区分了父子级的关系，让父级盒子自适应子级盒子的高度；

简单了解overflow

overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；

overflow:auto;  溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示；

清除浮动之after伪元素（推荐使用）

After伪元素清除浮动法实际开发中推荐使用：

/*声明清除浮动的样式*/

.clearfix:after {

        content: "";

        display: block;

        height: 0;

        visibility: hidden;

         clear: both;

}

.clearfix {

    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

谁里面的子级盒子浮动了，就在谁的开始标签身上添加class=“clearfix”

双伪元素清除浮动（推荐）

使用方法和After伪元素法一模一样

/*声明清除浮动的样式*/

.clearfix:before ,.clearfix:after {

        content: "";

        display: table;

}

.clearfix:after {

    clear:both;

}

.clearfix {

   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}