cssfloat_html/css_WEB-ITnose-HTML Tutorial-php.cn

1. Introduction to floating

History:

The floating attribute was originally created to achieve the "text wrapping" effect, allowing text to wrap around the image on the web page to achieve a similar "image and text mixing" in word. Row".

Positioning method:

Floating allows the element to break away from the normal flow and move to the left or right of the parent container until it hits the edge of the containing container [stops when it hits padding after testing] or hits other Floating elements. Text and inline elements will wrap around the floated element.

Note:

1. The edge that touches the container refers to the padding inner edge of the container.

Example verification:

<style>.container{    border: 1px solid green;    padding: 30px;    background-color: green;/*将背景裁剪到内容框，方便看浮动元素效果*/    background-clip: content-box;}.fl{    float: left;}</style><div class="container">    文字会环绕在图片周围文字会环绕在图片周围文字会环绕在图片周围文字会环绕在图片周围    <img class="fl" src="img/wb.jpg"></div>

Copy after login

2. Floating elements are out of the normal flow, which means that the following elements are laid out When it doesn't exist (the text still exists, wrapped around it), but still in the dom tree.

3. If you set the element to float through element.style in js, you need to use cssFloat, because float is a keyword in js. [StyleFloat is used for IE8 and below browsers]

is as follows:

<style>#father{    border:1px solid red;}#test{　　background-color: green;　　/*float: left;*/    }</style><div id="father"><span id="test">span内容</span></div><script type="text/javascript">    var oSpan=document.getElementById("test");    oSpan.style["cssFloat" in oSpan.style? "cssFloat" : "styleFloat"]="left";</script>

Copy after login

Floating effects: wrapping and destructiveness, are introduced one by one below.

2. Wrapping

Wrapping: This word was summarized by others, and I personally think it is summarized just right.

Wrapping means that the size of the element just fits the content.

Other properties with wrapping properties:

display:inline-block/table-cell/...

position:absolute/fixed/sticky

overflow:hidden/scroll

1. Take an example to see the wrapperity of floating

Example:

<style>.container{    border: 1px solid green;    padding: 30px;    background-color: green;    background-clip: content-box;/*将背景裁剪到内容框，方便看浮动元素效果*/}.fl{    float: left;}</style><div class="container fl">内容</div>

Copy after login

2. The principle of wrapping

The reason why floating produces the effect of wrapping is because the float attribute will change the final calculated value of the element's display attribute .

The display attribute before setting float??》The calculated value of display attribute after setting float

inline??》block

inline-block??》block

inline-table??》table

table-row??》block

table-row-group??》block

table-column??》 block

table-column-group??》block

table-caption??》block

table-header-group??》block

table-footer-group??》blcok

flex??》flex

inline-flex??》inline-flex [inline-flex is tested under chrome, display: flex after float]

other??》unchanged

After my test, only the display calculation value of inline-flex changes to flex after it floats under chrome, and everything else is the same. Interested friends can test it by themselves.

Here is a very simple test method for you: for example, to test inline-flex, you can choose any label. Here I use the span label, set the display attribute to inline-flex, and then set float:left. In the style option of the chrome console, check that the display attribute is inline-flex. Switch to the computed option to check that the display attribute is flex, as shown below. Testing other values can be edited and viewed directly in the console.

<style>.test{background-color: green;display:inline-flex;float: left;    }</style><span class="test">span内容</span>

Copy after login

You can use the wrapping property of float to achieve the adaptive internal element width of the parent container.

3. Destructiveness

Here destructiveness means that after the element floats, it may cause the parent element to collapse highly.

Other destructive properties:

display:none

position:absolute/fixed/sticky

Floating destructive principle:

Because the floating element is removed from the normal flow of the document, the parent element is of course still in the normal flow, so the parent element cannot be expanded by the floating element.

4. Clear floats

1. clear attribute

The clear attribute specifies which side of the element is not allowed to have other floating elements.

Values:

left: no floating elements are allowed on the left side of the element

right: no floating elements are allowed on the right side of the element

both: elements Floating elements are not allowed on the left and right sides

none: Default value, floating elements are allowed to appear on both sides

Specific principle: Add clear space above the upper margin of the element, such as clearing the left Floating will cause the top margin of the element to be just below the bottom margin of the floated element on the left.

There are two main methods for clearing floats

Sibling elements set clear:both

The parent element generates BFC (IE8) or haslayout (IE6/IE7)

Detailed analysis below.

2. Method 1: Set clear:both for sibling elements

The clear:both method also has the following methods.

a. Commonly used methods at the html level

Set clear on an empty div element: both

The clear attribute of the br tag

Example:

<style>.wrap{    background-color: green;}.fl{    float: left;}</style><div class="wrap"><img class="fl" src="img/wb.jpg" /><div style=" clear:both;margin-bottom:50px;">兄弟元素设置clear:both</div></div><p style="margin-top: 50px;">兄弟元素设置clear:both来清除浮动会有margin重叠现象</p>

Copy after login

Use this method to clear floats. One thing to note is that the margin overlaps, because clearing floating elements and dividing Elements other than floating elements are still in the same BFC.

Code level issues:

用标签来实现样式效果，不符合结构表现分离原则。标签复用变难。

标签没有任何语义

这样写代码不专业

将来有其他清除浮动的方法，你必须回头删掉所以分散在html页面中的
标签

b、父元素添加 after 伪元素

因为上面方法的种种弊端，更推荐使用这种父元素添加after伪元素清除浮动的方法。

上面方法是在html层面写的代码，而after伪元素是在css层面写的代码，虽然代码都不多，但站在结构和表现分离的角度看两种方式还是有差的。

代码如下：after在父元素底部生成一个具有clear:both 声明的伪元素来清除浮动。

.clearfix::before,.clearfix::after{    content: ".";    display: block;    height: 0;    overflow: hidden;}.clearfix:after{    clear: both;}.clearfix {    zoom: 1; /* IE < 8 */}

Copy after login

这种方法原理：

通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。

知道这点很重要，举个反例子来说明一下：

<style>.wrap{    background-color: green;}.fl{    float: left;}.clearfix::before,.clearfix::after{    content: ".";    display: block;    height: 0;    overflow: hidden;}.clearfix:after{    clear: both;}</style><div class="wrap clearfix"><img class="fl" src="img/wb.jpg" /><div >    父元素的::after伪元素并不是浮动元素【在这里是图片】的相邻的兄弟元素，就达不到清除浮动的效果父元素的::after伪元素并不是浮动元素【在这里是图片】的相邻的兄弟元素，就达不到清除浮动的效果父元素的::after伪元素并不是浮动元素【在这里是图片】的相邻的兄弟元素，就达不到清除浮动的效果</div></div>

Copy after login

因为父元素生成的并不是浮动元素相邻的兄弟元素，所以使用clear:both无效，使用时必须注意。

c、一个更简洁的版本

支持浏览器： Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the *    contenteditable attribute is included anywhere else in the document. *    Otherwise it causes space to appear at the top and bottom of elements *    that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using *    `:before` to contain the top-margins of child elements. */.cf:before,.cf:after {    content: " ";    display: table; }.cf:after {    clear: both;}/* IE < 8 *//** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */.cf {    *zoom: 1;}

Copy after login

了解更多可参考micro-clearfix-hack

zoom是为了兼容IE6,7;:before是为了阻止margin重叠，如果只清除浮动，可用：

.container:after {  content:"";  display:table;  clear:both;}

Copy after login

3、补充知识：BFC

BFC:块级格式化上下文【在css3中叫Flow Root】是一个独立布局环境，相邻盒子margin垂直方向会重叠。

什么样的元素会为其内容生成一个BFC呢？

浮动元素，即float:left|right

绝对定位元素，即position:absolute|fixed

块容器【block containers】(比如inline-blocks，table-cells和table-captions)，这些块容器有个特征就是它们不是块级盒子【block boxes】。即display:table-cell|table-caption|inline-block

设置了除visible外的overflow值的块盒子【blok boxes】，即overflow:hidden|scroll|auto

BFC特性：

创建了BFC的元素中，子浮动元素也会参与高度计算

与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖

创建了BFC的元素不会与它们的子元素margin重叠

4、方法二：父元素生成BFC（IE8+）或haslayout(IE6/IE7)

正是因为BFC特性中，创建了BFC的元素中，子浮动元素也会参与高度计算，所以可来清除浮动。

常用方法如下：

浮动父元素（触发 BFC）

overflow: hidden （触发 BFC）

display: table或table-cells;（触发 BFC，display:table 本身并不产生 BFC，而是由它产生匿名框，匿名框中包含 "display:table-cell" 的框会产 BFC）

举例：父元素使用overflow:hidden生成一个BFC来清除浮动。

<style>.wrap{    background-color: green;    overflow: hidden;}.fl{    float: left;}</style><div class="wrap"><img class="fl" src="img/wb.jpg" /><div style=" margin-bottom:50px;">浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容</div></div><p style="margin-top: 50px;">浮动元素父元素的兄弟元素内容</p>

Copy after login

overflow: hidden;使得包含图片的div生成BFC，所以里面内容元素与外面包含文字的div的margin不会重叠，如上图。

两种清除浮动方法区别：clear:both可以发生margin重叠，BFC隔离不会有margin重叠。

BFC缺点：

1、不能应用于所有场合，因为不可能所有元素都绝对定位或者不可能所有元素都浮动。

2、现代浏览器不认识zoom1。

5、清除浮动方法总结

每种清除浮动的方法都有弊端，权衡后推荐用法：

.clearfix:after{content:"";display:block;height:0;overflow:hidden;clear:both;}/*IE6和IE7*/.clearfix{*zoom:1;}

Copy after login

或者用：

.clearfix:after{content:"";display:table;clear:both;}/*IE6和IE7*/.clearfix{*zoom:1;}

Copy after login

Note:

.clearfix类只应该用在包含浮动元素的父元素上。【如果不懂这句话再把上文看一遍】

五、浮动布局

1、普通固定布局

通常用的浮动布局一般是：固定尺寸+浮动。

举例：两栏布局

<style type="text/css">  body{    width: 600px;  }  .left{    width: 150px; float: left;   }.right { width: 450px; float: right; }  </style><body>  <div class="left">    <img src="img/wb.jpg"/>  </div>  <div class="right">    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容  </div></body>

Copy after login

问题：

容错性差：容器尺寸变了，就得改代码。

复用性不好：尺寸固定，模块在另外尺寸容器中不能重用。

2、推荐布局

a、左侧尺寸固定右侧自适应的流体布局

举例：在上面代码基础上修改样式为

<style type="text/css">  .left{    width: 150px; float: left;   }  /*流体布局*/.right { margin-left: 150px;}  </style>

Copy after login

重点是使用margin-left，且不要定宽。这样好处是容器尺寸变化右侧可自适应。

b、右侧尺寸固定左侧自适应的流体布局

改变DOM位置的流体布局写法

写代码时顺序为先右后左，这样就可以设置右栏右浮动，左栏设置margin-right。

<style type="text/css">.right{float: right;width: 150px;}.left{margin-right: 150px;}  </style></head><body><div  class="right"><img  src="img/wb.jpg"></div><div class="left">文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</div></body>

Copy after login

不改变DOM位置的流体布局写法【左右栏都左浮动】

写代码时顺序不变，左右栏都浮动，通过margin调整位置。

<style type="text/css">.wrap {  width: 100%;  float: left;}.left {  margin-right: 150px;}.right {  width: 150px;  float: left;  margin-left: -150px;}  </style><body><div class="wrap">    <div class="left">    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容    </div></div><div  class="right">    <img  src="img/wb.jpg"></div></body>

Copy after login

效果同上。

大前端就是用的这种布局方法。

c、两栏都自适应的布局

原理是左栏浮动，右两栏生成BFC，根据BFC特性与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖。

<style type="text/css">.left {  float: left;}.right{   display: table-cell; }  </style><body> <div class="left">    <img src="img/wb.jpg"/>  </div>  <div class="right">    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容  </div></body>

Copy after login

六、float布局和inline-block布局对比

浮动和inline-block都能让元素排成一排，那么应该如何抉择？下面对比一下。

文档流：浮动元素脱离正常流，让文字环绕。inline-block仍然在正常流中。

水平位置：不能通过给父元素设置text-align:center让浮动元素无法水平居中【因为脱离文档流】，而inline-block可以。

垂直对齐：浮动元素紧贴顶部，inline-block默认基线对齐，可通过vertical-align调整。

空白：浮动忽略空白元素彼此紧靠，inline-block保留空白。

举例：浮动布局可以去掉元素之间的空格，而inline-block会保留空格。

<style>button {    margin: 0;    float: left;}p {    clear: both;}</style></head><body>    <button>按钮1</button>    <button>按钮2</button>    <button>按钮3</button>    <button>按钮4</button></body>

Copy after login

分析：button默认display:inline-block；可见他们之间有空格的距离。加了float:left后各个button元素之间空格消失。

总结一下：处理文字环绕自然是用浮动，处理图片列表垂直对齐或者横向导航可以选择inline-block。