防止父级边框塌陷的四种方法
Posted yun---meng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了防止父级边框塌陷的四种方法相关的知识,希望对你有一定的参考价值。
浮动元素后面加空div:空div会造成
html代码冗余
设置父元素的高度:固定高度会降低元素可扩展
父级添加overflow属性:有下拉列表框场景不能用
父级添加伪类after:没有副作用,推荐使用 { 清除浮动 }
!--5f39ae17-8c62-4a45-bc43-b32064c9388a:W3siYmxvY2tJZCI6IjU2NzYtMTU3NjI4OTc1MDgyNyIsImJsb2NrVHlwZSI6InBhcmFncmFwaCIsInN0eWxlcyI6eyJsaW5lLWhlaWdodCI6MS4yNSwiYWxpZ24iOiJsZWZ0IiwiaW5kZW50IjowLCJ0ZXh0LWluZGVudCI6MCwiYmFjay1jb2xvciI6IiIsInBhZGRpbmciOiIifSwidHlwZSI6InBhcmFncmFwaCIsInJpY2hUZXh0Ijp7ImRhdGEiOlt7ImNoYXIiOiLmta4ifSx7ImNoYXIiOiLliqgifSx7ImNoYXIiOiLlhYMifSx7ImNoYXIiOiLntKAifSx7ImNoYXIiOiLlkI4ifSx7ImNoYXIiOiLpnaIifSx7ImNoYXIiOiLliqAifSx7ImNoYXIiOiLnqboifSx7ImNoYXIiOiJkIn0seyJjaGFyIjoiaSJ9LHsiY2hhciI6InYifSx7ImNoYXIiOiLvvJoifSx7ImNoYXIiOiLnqboifSx7ImNoYXIiOiJkIn0seyJjaGFyIjoiaSJ9LHsiY2hhciI6InYifSx7ImNoYXIiOiLkvJoifSx7ImNoYXIiOiLpgKAifSx7ImNoYXIiOiLmiJAifSx7ImNoYXIiOiJIIn0seyJjaGFyIjoiVCJ9LHsiY2hhciI6Ik0ifSx7ImNoYXIiOiJMIn0seyJjaGFyIjoi5LujIn0seyJjaGFyIjoi56CBIn0seyJjaGFyIjoi5YaXIn0seyJjaGFyIjoi5L2ZIn1dLCJpc1JpY2hUZXh0Ijp0cnVlLCJrZWVwTGluZUJyZWFrIjp0cnVlfX0seyJibG9ja0lkIjoiMjg2OS0xNTc2Mjg5NzUwODI3IiwiYmxvY2tUeXBlIjoicGFyYWdyYXBoIiwic3R5bGVzIjp7ImxpbmUtaGVpZ2h0IjoxLjI1LCJhbGlnbiI6ImxlZnQiLCJpbmRlbnQiOjAsInRleHQtaW5kZW50IjowLCJiYWNrLWNvbG9yIjoiIiwicGFkZGluZyI6IiJ9LCJ0eXBlIjoicGFyYWdyYXBoIiwicmljaFRleHQiOnsiZGF0YSI6W3siY2hhciI6IiAifSx7ImNoYXIiOiIgIn0seyJjaGFyIjoiICJ9LHsiY2hhciI6IiAifSx7ImNoYXIiOiIgIn0seyJjaGFyIjoiICJ9LHsiY2hhciI6IiAifSx7ImNoYXIiOiLorr4ifSx7ImNoYXIiOiLnva4ifSx7ImNoYXIiOiLniLYifSx7ImNoYXIiOiLlhYMifSx7ImNoYXIiOiLntKAifSx7ImNoYXIiOiLnmoQifSx7ImNoYXIiOiLpq5gifSx7ImNoYXIiOiLluqYifSx7ImNoYXIiOiLvvJoifSx7ImNoYXIiOiLlm7oifSx7ImNoYXIiOiLlrpoifSx7ImNoYXIiOiLpq5gifSx7ImNoYXIiOiLluqYifSx7ImNoYXIiOiLkvJoifSx7ImNoYXIiOiLpmY0ifSx7ImNoYXIiOiLkvY4ifSx7ImNoYXIiOiLlhYMifSx7ImNoYXIiOiLntKAifSx7ImNoYXIiOiLlj68ifSx7ImNoYXIiOiLmiakifSx7ImNoYXIiOiLlsZUifV0sImlzUmljaFRleHQiOnRydWUsImtlZXBMaW5lQnJlYWsiOnRydWV9fSx7ImJsb2NrSWQiOiI3Mjg0LTE1NzYyODk3NTA4MjciLCJibG9ja1R5cGUiOiJwYXJhZ3JhcGgiLCJzdHlsZXMiOnsibGluZS1oZWlnaHQiOjEuMjUsImFsaWduIjoibGVmdCIsImluZGVudCI6MCwidGV4dC1pbmRlbnQiOjAsImJhY2stY29sb3IiOiIiLCJwYWRkaW5nIjoiIn0sInR5cGUiOiJwYXJhZ3JhcGgiLCJyaWNoVGV4dCI6eyJkYXRhIjpbeyJjaGFyIjoiICJ9LHsiY2hhciI6IiAifSx7ImNoYXIiOiIgIn0seyJjaGFyIjoiICJ9LHsiY2hhciI6IiAifSx7ImNoYXIiOiIgIn0seyJjaGFyIjoiICJ9LHsiY2hhciI6IueItiJ9LHsiY2hhciI6Iue6pyJ9LHsiY2hhciI6Iua3uyJ9LHsiY2hhciI6IuWKoCJ9LHsiY2hhciI6Im8ifSx7ImNoYXIiOiJ2In0seyJjaGFyIjoiZSJ9LHsiY2hhciI6InIifSx7ImNoYXIiOiJmIn0seyJjaGFyIjoibCJ9LHsiY2hhciI6Im8ifSx7ImNoYXIiOiJ3In0seyJjaGFyIjoi5bGeIn0seyJjaGFyIjoi5oCnIn0seyJjaGFyIjoi77yaIn0seyJjaGFyIjoi5pyJIn0seyJjaGFyIjoi5LiLIn0seyJjaGFyIjoi5ouJIn0seyJjaGFyIjoi5YiXIn0seyJjaGFyIjoi6KGoIn0seyJjaGFyIjoi5qGGIn0seyJjaGFyIjoi5Zy6In0seyJjaGFyIjoi5pmvIn0seyJjaGFyIjoi5LiNIn0seyJjaGFyIjoi6IO9In0seyJjaGFyIjoi55SoIn1dLCJpc1JpY2hUZXh0Ijp0cnVlLCJrZWVwTGluZUJyZWFrIjp0cnVlfX0seyJibG9ja0lkIjoiNDAyNS0xNTc2Mjg5NzUwODI3IiwiYmxvY2tUeXBlIjoicGFyYWdyYXBoIiwic3R5bGVzIjp7ImxpbmUtaGVpZ2h0IjoxLjI1LCJhbGlnbiI6ImxlZnQiLCJpbmRlbnQiOjAsInRleHQtaW5kZW50IjowLCJiYWNrLWNvbG9yIjoiIiwicGFkZGluZyI6IiJ9LCJ0eXBlIjoicGFyYWdyYXBoIiwicmljaFRleHQiOnsiZGF0YSI6W3siY2hhciI6IiAifSx7ImNoYXIiOiIgIn0seyJjaGFyIjoiICJ9LHsiY2hhciI6IiAifSx7ImNoYXIiOiIgIn0seyJjaGFyIjoiICJ9LHsiY2hhciI6IiAiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6IueItiIsInN0eWxlcyI6eyJjb2xvciI6IiNkZjQwMmEifX0seyJjaGFyIjoi57qnIiwic3R5bGVzIjp7ImNvbG9yIjoiI2RmNDAyYSJ9fSx7ImNoYXIiOiLmt7siLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6IuWKoCIsInN0eWxlcyI6eyJjb2xvciI6IiNkZjQwMmEifX0seyJjaGFyIjoi5LyqIiwic3R5bGVzIjp7ImNvbG9yIjoiI2RmNDAyYSJ9fSx7ImNoYXIiOiLnsbsiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6ImEiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6ImYiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6InQiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6ImUiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6InIiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6Iu+8miIsInN0eWxlcyI6eyJjb2xvciI6IiNkZjQwMmEifX0seyJjaGFyIjoi5rKhIiwic3R5bGVzIjp7ImNvbG9yIjoiI2RmNDAyYSJ9fSx7ImNoYXIiOiLmnIkiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6IuWJryIsInN0eWxlcyI6eyJjb2xvciI6IiNkZjQwMmEifX0seyJjaGFyIjoi5L2cIiwic3R5bGVzIjp7ImNvbG9yIjoiI2RmNDAyYSJ9fSx7ImNoYXIiOiLnlKgiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6Iu+8jCIsInN0eWxlcyI6eyJjb2xvciI6IiNkZjQwMmEifX0seyJjaGFyIjoi5o6oIiwic3R5bGVzIjp7ImNvbG9yIjoiI2RmNDAyYSJ9fSx7ImNoYXIiOiLojZAiLCJzdHlsZXMiOnsiY29sb3IiOiIjZGY0MDJhIn19LHsiY2hhciI6IuS9vyIsInN0eWxlcyI6eyJjb2xvciI6IiNkZjQwMmEifX0seyJjaGFyIjoi55SoIiwic3R5bGVzIjp7ImNvbG9yIjoiI2RmNDAyYSJ9fSx7ImNoYXIiOiIgIiwic3R5bGVzIjp7ImNvbG9yIjoiIzUyOGNkOCJ9fSx7ImNoYXIiOiJ7Iiwic3R5bGVzIjp7ImNvbG9yIjoiIzUyOGNkOCJ9fSx7ImNoYXIiOiIgIiwic3R5bGVzIjp7ImNvbG9yIjoiIzUyOGNkOCJ9fSx7ImNoYXIiOiLmuIUiLCJzdHlsZXMiOnsiY29sb3IiOiIjNTI4Y2Q4In19LHsiY2hhciI6IumZpCIsInN0eWxlcyI6eyJjb2xvciI6IiM1MjhjZDgifX0seyJjaGFyIjoi5rWuIiwic3R5bGVzIjp7ImNvbG9yIjoiIzUyOGNkOCJ9fSx7ImNoYXIiOiLliqgiLCJzdHlsZXMiOnsiY29sb3IiOiIjNTI4Y2Q4In19LHsiY2hhciI6IiAiLCJzdHlsZXMiOnsiY29sb3IiOiIjNTI4Y2Q4In19LHsiY2hhciI6In0iLCJzdHlsZXMiOnsiY29sb3IiOiIjNTI4Y2Q4In19XSwiaXNSaWNoVGV4dCI6dHJ1ZSwia2VlcExpbmVCcmVhayI6dHJ1ZX19LHsiYmxvY2tJZCI6Ijg5NjUtMTU3NjI4OTc1MDgyNyIsImJsb2NrVHlwZSI6InBhcmFncmFwaCIsInN0eWxlcyI6eyJsaW5lLWhlaWdodCI6MS4yNSwiYWxpZ24iOiJsZWZ0IiwiaW5kZW50IjowLCJ0ZXh0LWluZGVudCI6MCwiYmFjay1jb2xvciI6IiIsInBhZGRpbmciOiIifSwidHlwZSI6InBhcmFncmFwaCIsInJpY2hUZXh0Ijp7ImRhdGEiOltdLCJpc1JpY2hUZXh0Ijp0cnVlLCJrZWVwTGluZUJyZWFrIjp0cnVlfX1d-->以上是关于防止父级边框塌陷的四种方法的主要内容,如果未能解决你的问题,请参考以下文章
float浮动,父级元素边框塌陷问题
防止高度塌陷的方法
高度塌陷的四种解决办法
div塌陷,以及页面常用属性
margin-top塌陷解决方法
C#--TextBox的四种禁止编辑方法