做网站需要多少空间,网站建设的公司上海,深圳福田区是富人区吗,网络营销推广有哪些方法css浮动及清除浮动副作用的三种解决方法 文章目录 css浮动及清除浮动副作用的三种解决方法一、浮动定义二、浮动元素设置三、清除浮动副作用方法一四、清除浮动副作用方法二五、清除浮动副作用方法三 一、浮动定义
浮动#xff08;Float#xff09;是CSS中一种布局技术…css浮动及清除浮动副作用的三种解决方法 文章目录 css浮动及清除浮动副作用的三种解决方法一、浮动定义二、浮动元素设置三、清除浮动副作用方法一四、清除浮动副作用方法二五、清除浮动副作用方法三 一、浮动定义
浮动Float是CSS中一种布局技术用于使元素沿其容器的左侧或右侧浮动并允许文本和内联元素围绕它。浮动的常见应用是在创建多列布局或在文本中插入图片时。
理解浮动可以帮助我们更好进行页面排版使原本竖着排列的盒子可以横向排列起来。
二、浮动元素设置
1、使用 float 属性可以将元素向左或向右浮动。例如float: left; 将使元素向左浮动允许其他内容环绕其右侧。 .myclass1{width: 50%;float: left;}2、浮动的副作用因为浮动会使元素脱离了标准的文档流从而导致父级元素无法被撑开。
3、浮动的清除 当一个元素浮动后其父元素的高度将不再自动扩展以适应浮动元素的高度。这时需要清除浮动 。
理解想将盒子向左或右排列就需要使用浮动但浮动会导致父级元素被撑开管不住子级元素就需要方法清除这个副作用。
三、清除浮动副作用方法一
对父级元素设置适合CSS高度
这里使用类选择器选中父级div,用id选择器选择两个子级div并分别增加样式最后给子级div增加向左浮动样式。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.Myclass{border: blue 3px solid;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}/style/headbodydiv classMyclassdiv idbox01/divdiv idbox02/div/div/body
/html
浮动副作用如图所示 解决方法对父级元素设置适合高度样式清除浮动 这里对父级div设置一定高度即可父级div需要大于子级div的高度即可这里我们知道内容高度是50PX上下边框为2px这样具体父级高度为52px
.Myclass{height: 52px;border: blue 3px solid;}效果如图
四、清除浮动副作用方法二
使用clear:both清除浮动副作用
同上分别给父级div和子级div增加样式并给子级div增加向左浮动样式。
解决方法添加空盒子
在被浮动的元素后面添加一个空的div并且设置一个clear类并付给该div一个clearboth就可清除浮动副作用。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.Myclass{border: blue 3px solid;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}.clear{clear: both;}/style/headbodydiv classMyclassdiv idbox01/divdiv idbox02/div!--这里加一个空盒子用于清除浮动--div classclear/div/div/body
/html
效果如图 五、清除浮动副作用方法三
给父级div定义 overflow:hidden
同上分别给父级div和子级div增加样式并给子级div增加向左浮动样式。
解决方法 对父级CSS选择器加overflow:hidden样式可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.Myclass{border: blue 3px solid;overflow: hidden;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}/style/headbodydiv classMyclassdiv idbox01/divdiv idbox02/div/div/body
/html
效果如图
