专建网站,怎样说服企业做网站建设推广,临沂做网站首选,网站建设教学点概述
浮动简介
在最初#xff0c;浮动是用来实现文字环绕图片效果的#xff0c;现在浮动是主流的页面布局方式之一。
元素浮动后的特点
脱离文档流。不管浮动前是什么元素#xff0c;浮动后#xff0c;默认宽与高都是被内容撑开的#xff08;尽可能小#xff09;浮动是用来实现文字环绕图片效果的现在浮动是主流的页面布局方式之一。
元素浮动后的特点
脱离文档流。不管浮动前是什么元素浮动后默认宽与高都是被内容撑开的尽可能小而且可以设置宽高。不会独占一行可以与其他元素共用一行。不会margin合并也不会margin塌陷能够完美的设置四个方向的margin和padding。不会像行内块一样被当做文本处理没有行内块的空白问题。
浮动后会有哪些影响
对兄弟元素的影响后面的兄弟元素会占据浮动元素之前的位置在浮动元素的下面文字被甩出呈现文字环绕效果对前面的兄弟元素无影响。对父元素的影响不能撑起父元素的高度导致父元素高度塌陷但父元素的宽度依然束缚浮动的元素。
解决浮动产生的影响清除浮动
解决方案
方案1给父元素指定高度。方案2给父元素也设置浮动带来其他影响。方案3给父元素设置overflow:hidden。方案4在所有浮动元素的最后面添加一个块级元素并给该元素设置clear:both。方案5给浮动的元素设置伪元素通过伪元素清除浮动原理与方案四相同。》推荐使用
.parent::after {content:;display:block;clear:both;
}布局中的一个原则设置浮动的时候兄弟元素要么全都浮动要么全都不浮动。
