css浮动的几种方式(css浮动怎么使用)

css浮动的几种方式

1、起浮的设置：css特点float：left/right/none 左起浮/右起浮/不起浮（默认）2、起浮的原理：使当前元素脱离普通流，相当于起浮起来相同，起浮的框能够左右移动，直至它的外边缘遇到包括框或许另一个起浮框的边缘
3、起浮的影响：对附近的元素布局形成改变，使得布局紊乱因为起浮元素脱离了普通流，会呈现一种高度坍塌的现象：原来的父容器高度是内部元素撑开的，但是当内部元素起浮后，脱离普通流起浮起来，那父容器的高度就坍塌，变为高度0px。
如下图：图片图片铲除起浮的5种办法
1、父级div界说overflow:hidden
Left
Right
原理：运用overflow:hidden时，浏览器会主动检查起浮区域的高度。
长处：简单，代码少，浏览器支撑好。
缺陷：必须界说width或zoom:1，不能和position配合运用，因为超出的尺寸的会被躲藏。
主张：只引荐没有运用position或对overflow:hidden理解的朋友运用。
2、结尾处加空div标签clear:both
child-1
child-2
原理：添加一个空div，利用css进步的clear:both铲除起浮，让父级div能主动获取到高度。
长处：简单，代码少，浏览器支撑好，不简单呈现怪问题。
缺陷：不少初学者不理解原理；假如页面起浮布局多，就要增加许多空div，让人感觉很不爽。
主张：此办法是以前主要运用的一种铲除起浮办法。
3、父级div界说height
Left
Right
原理：父级div手动界说height，就处理了父级div无法主动获取到高度的问题。
长处：简单，代码少，简单把握。
缺陷：只适合高度固定的布局，要给出准确的高度，假如高度和父级div不相同时，会产生问题。
主张：不引荐运用，只主张高度固定的布局时运用。
4、父级div界说overflow:auto
.div1{background:#000080;border:1px solid red;width:98%;overflow:auto}
原理：同1，运用overflow:auto时，浏览器会主动检查起浮区域的高度。
长处：简单，代码少，浏览器支撑好。
缺陷：内部宽高超过父级div时，会呈现滚动条。
主张：不引荐运用，假如你需求呈现滚动条或许保证你的代码不会呈现滚动条就运用吧。
5、父级div界说伪类:after和zoom
<style type=”text/css”>　 .div1{background:#000080;border:1px solid red;}　 .left{float:left;width:20%;height:200px;background:#DDD}　 .right{float:right;width:30%;height:80px;background:#DDD} 　 .clearfloat:after{display:block;clear:both;content:””;visibility:hidden;height:0}　 .clearfloat{zoom:1}style><div class=”div1 clearfloat”> 　　<div class=”left”>Leftdiv> 　　<div class=”right”>Rightdiv>div>
长处：浏览器支撑好，不简单呈现怪问题（目前：大型网站都有运用，如：腾迅，网易，新浪等等）。
缺陷：代码多，不少初学者不理解原理，要两句代码结合运用，才能让干流浏览器都支撑。
主张：引荐运用，主张界说公共类，以削减CSS代码。

css浮动怎么使用

起浮就是制定一个元素沿容器的左边或右侧方位，允许文本元素和内联元素环绕它。该元素从网页的正常活动（文档流）中移除，尽管仍然保持部分的活动性。（与绝对定位相反）
语法：float: none | left | right | initial | inherit;
这些值顺次对应着没有起浮样式，左起浮、右起浮、初始方位、继承父元素的起浮方法。
以下两张图来比较一下加不加起浮的作用。
图一div盒子不加起浮，作为块级元素占有整行，下面的文字也不能在一行内显现。
图二div盒子加了左起浮，float：left；本不在一行内显现的文字，也提了上来。
在这两张图上，我对黑色背景的div盒子只加了左起浮作用，并没有更改display特点。可是很明显的看到加了左起浮的div盒子的display特点已然发生了影响。有点像是display：block；变成了display：inline-block；但这仅仅咱们视觉上的作用。
首先，块级元素加了起浮以后，display特点仍然为block；内联元素加了起浮以后，display特点变为block；行内块元素加了起浮以后变为block；
说完起浮的作用，接下来说起浮对页面元素的影响。
1.首先是对兄弟元素的影响
1.1当兄弟元素为行内元素。兄弟元素就会被挤开，紧贴着加了起浮的元素显现。
1.2 当兄弟元素是块级元素。加了起浮的元素就像是漂浮在兄弟元素的上方。兄弟元素比加了起浮的元素宽高大还好，能显现出部分作用。假如尺度小于的话，会被直接盖住。
2.其次是对父元素的影响
2.1当父元素是行内元素时，产生了和兄弟元素是行内元素相同的作用。所以在父元素是行内元素时，一般不要运用起浮，防止造成不必要的麻烦。
2.2当父级元素是块级元素时。假如父元素有宽高，如图2.2-1所示，那么起浮对其没什么影响。假如父元素没有设置宽高，在不增加起浮的情况下，父元素会被子元素盒子的宽高撑开，能正常显现；在对子元素增加起浮后，父盒子因为没有设置宽高，然后被挤扁。所以在父元素没有设置宽高时，加了起浮的子元素不能撑开父盒子。
3.起浮元素之间的影响。
3.1如下图所示四个盒子都加了左起浮，因为起浮方向一致。元素在有限宽度的盒子内部顺次摆放，因为最后一个盒子的宽度已然小于空隙，所以不能一行内展示，然后换行。相同的假如div3的宽度大于剩余空隙的宽度，那么他也会换行。
3.2相同的我这四个盒子也是相同的起浮，仅仅更改了四个盒子的宽高。咱们就看到了别的的一种现实作用。这儿因为div2的高度为200px，div3、div4的高度为100px，div2的高度撑开了必定的间隔，假如排在其后边增加了起浮的元素，宽高能够塞进去；那么就会紧贴着显现。也就是说我的div3占有了100px，我的div4的盒子假如想贴着后边显现，那么目前来说他的宽度要小于等于div3的宽度，高度小于等于（200-100）px。否则的话div4仍然会被挤下去显现。
综上所述，能够总结出几条规律：
1.水平方向，靠左（依据起浮方向）顺次摆放。
2.间隔不够时，换行。
3.换行后的元素，尽量靠上显现，但不能超过前一个起浮留出来的空间。